@lobehub/ui 1.42.0 → 1.44.0

package/es/ChatHeader/style.d.ts

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

package/es/ChatHeader/style.js

@@ -1,10 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      grid-area: header;\n      height: 64px;\n      border-bottom: 1px solid ", ";\n    "])), token.colorSplit)
+    container: cx(stylish.blurStrong, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n\n        grid-area: header;\n        align-self: stretch;\n\n        width: 100%;\n        height: 64px;\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.colorSplit))
   };
 });

package/es/ChatItem/style.js

@@ -1,17 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
     showTitle = _ref2.showTitle;
-  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
+  var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFillSecondary : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillTertiary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;

package/es/DraggablePanel/index.d.ts

@@ -40,6 +40,7 @@ export interface DraggablePanelProps extends DivProps {
      * @type CSSProperties
      */
     hanlderStyle?: CSSProperties;
+    headerHeight?: number;
     maxHeight?: number;
     maxWidth?: number;
     /**

package/es/DraggablePanel/index.js

@@ -15,7 +15,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 180;
 var DEFAULT_WIDTH = 280;
 var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
-  var fullscreen = _ref.fullscreen,
+  var _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 0 : _ref$headerHeight,
+    fullscreen = _ref.fullscreen,
     maxHeight = _ref.maxHeight,
     _ref$pin = _ref.pin,
     pin = _ref$pin === void 0 ? 'true' : _ref$pin,
@@ -48,7 +50,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var reference = useRef();
   var isHovering = useHover(reference);
   var isVertical = placement === 'top' || placement === 'bottom';
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(headerHeight),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var _useControlledState = useControlledState(defaultExpand, {

package/es/DraggablePanel/style.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
     bottomFloat: string;
     bottomHandle: string;
     container: string;

package/es/DraggablePanel/style.js

@@ -5,7 +5,7 @@ var offset = 16;
 var toggleLength = 40;
 var toggleShort = 16;
 var prefix = 'draggable-panel';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, headerHeight) {
   var token = _ref.token;
   var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
   var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 101;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
@@ -15,18 +15,18 @@ export var useStyles = createStyles(function (_ref) {
     bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          bottom: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle)),
     container: cx(prefix, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        flex-shrink: 0;\n        border: 0 solid ", ";\n\n        &:hover {\n          .", "-toggle {\n            opacity: 1;\n          }\n        }\n      "])), token.colorBorderSecondary, prefix)),
     fixed: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n    "]))),
-    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    "]))),
+    fullscreen: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: ", "px 0 0 0;\n\n      width: 100%;\n      height: calc(100% - ", "px);\n\n      background: ", ";\n    "])), headerHeight, headerHeight, token.colorBgLayout),
     handlerIcon: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ", ";\n    "])), token.motionEaseOut),
-    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        top: 0;\n        bottom: 0;\n        left: 0;\n        height: 100%;\n      "])))),
+    leftFloat: cx(float, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        top: ", "px;\n        bottom: 0;\n        left: 0;\n        height: calc(100% - ", "px);\n      "])), headerHeight, headerHeight)),
     leftHandle: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          left: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-left-handle")),
     panel: cx("".concat(prefix, "-fixed"), css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut)),
-    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        bottom: 0;\n        height: 100%;\n      "])))),
+    rightFloat: cx(float, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        top: ", "px;\n        right: 0;\n        bottom: 0;\n        height: calc(100% - ", "px);\n      "])), headerHeight, headerHeight)),
     rightHandle: cx(css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        ", ";\n        &::before {\n          right: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-right-handle")),
     toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        bottom: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: 16px;\n          margin-left: -20px;\n\n          border-radius: 0 0 4px 4px;\n        }\n      "])), offset, toggleShort, toggleLength)),
     toggleLeft: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-left"), commonToggle, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        left: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 4px 0 0 4px;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        top: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-left: -20px;\n\n          border-radius: 4px 4px 0 0;\n        }\n      "])), offset, toggleShort, toggleLength, toggleShort)),
-    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        top: 0;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])))),
+    topFloat: cx(float, css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        top: ", "px;\n        right: 0;\n        left: 0;\n        width: 100%;\n      "])), headerHeight)),
     topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          top: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle))
   };
 });

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

@@ -3,7 +3,9 @@ import { FormItemProps as AntdFormItemProps } from 'antd';
 export interface FormItemProps extends AntdFormItemProps {
     desc?: string;
     divider?: boolean;
+    hidden?: boolean;
     minWidth?: string | number;
+    tag?: string;
 }
 declare const FormItem: import("react").NamedExoticComponent<FormItemProps>;
 export default FormItem;

package/es/Form/components/FormItem.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["desc", "minWidth", "className", "label", "children", "divider"];
+var _excluded = ["desc", "tag", "minWidth", "className", "label", "children", "divider"];
 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 { Form } from 'antd';
@@ -14,6 +14,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var Item = Form.Item;
 var FormItem = /*#__PURE__*/memo(function (_ref) {
   var desc = _ref.desc,
+    tag = _ref.tag,
     minWidth = _ref.minWidth,
     className = _ref.className,
     label = _ref.label,
@@ -26,10 +27,11 @@ var FormItem = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [divider && /*#__PURE__*/_jsx(FormDivider, {}), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
       className: cx(styles.item, className),
-      label: desc ? /*#__PURE__*/_jsx(FormTitle, {
+      label: /*#__PURE__*/_jsx(FormTitle, {
         desc: desc,
+        tag: tag,
         title: String(label)
-      }) : label
+      })
     }, props), {}, {
       children: children
     }))]

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

@@ -2,6 +2,7 @@
 import { DivProps } from "../../types";
 export interface FormTitleProps extends DivProps {
     desc?: string;
+    tag?: string;
     title: string;
 }
 declare const FormTitle: import("react").NamedExoticComponent<FormTitleProps>;

package/es/Form/components/FormTitle.js

@@ -1,9 +1,12 @@
+import { Tag } from 'antd';
 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";
 var FormTitle = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
+    tag = _ref.tag,
     title = _ref.title,
     desc = _ref.desc;
   var _useStyles = useStyles(),
@@ -11,8 +14,13 @@ var FormTitle = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.formTitle, className),
-    children: [/*#__PURE__*/_jsx("div", {
-      children: title
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      direction: 'horizontal',
+      gap: 8,
+      children: [title, tag && /*#__PURE__*/_jsx(Tag, {
+        children: tag
+      })]
     }), desc && /*#__PURE__*/_jsx("small", {
       children: desc
     })]

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

@@ -1,7 +1,7 @@
 export declare const useStyles: (props?: string | number | undefined) => import("antd-style").ReturnStyles<{
     footer: import("antd-style").SerializedStyles;
     formTitle: import("antd-style").SerializedStyles;
-    group: import("antd-style").SerializedStyles;
+    group: string;
     item: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/Form/components/style.js

@@ -1,15 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
   var css = _ref.css,
-    token = _ref.token;
+    cx = _ref.cx,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   return {
-    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  "]))),
-    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  "])), token.colorTextDescription),
-    group: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .ant-collapse-header {\n      background: ", ";\n      border-radius: 0 !important;\n    }\n\n    .ant-collapse-content {\n      background: transparent;\n    }\n\n    .ant-collapse-content-box {\n      padding-top: 0 !important;\n      padding-bottom: 0 !important;\n    }\n\n    .ant-form-item-label {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n    }\n  "])), token.colorFillTertiary),
-    item: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 8px 0;\n\n    .ant-row {\n      justify-content: space-between;\n\n      > div {\n        flex: unset !important;\n        flex-grow: unset !important;\n      }\n    }\n\n    ", "\n  "])), itemMinWidth && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      .ant-form-item-control {\n        width: ", ";\n      }\n    "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
-    title: css(_templateObject6 || (_templateObject6 = _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)
+    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    "]))),
+    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      .ant-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, token.fontFamilyCode),
+    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
+    item: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
+    title: css(_templateObject7 || (_templateObject7 = _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)
   };
 });

package/es/Form/index.d.ts

@@ -1,4 +1,4 @@
-import { FormProps as AntFormProps } from 'antd';
+import { FormProps as AntFormProps, type FormInstance } from 'antd';
 import { LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 import { FormItemProps } from './components/FormItem';
@@ -13,5 +13,5 @@ export interface FormProps extends AntFormProps {
     itemMinWidth?: FormItemProps['minWidth'];
     items?: ItemGroup[];
 }
-declare const Form: import("react").NamedExoticComponent<FormProps>;
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<FormInstance<any>>>;
 export default Form;

package/es/Form/index.js

@@ -4,14 +4,14 @@ var _excluded = ["className", "itemMinWidth", "footer", "items", "children"];
 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 { Form as AntForm } from 'antd';
-import { memo } from 'react';
+import { forwardRef } from 'react';
 import FormFooter from "./components/FormFooter";
 import FormGroup from "./components/FormGroup";
 import FormItem from "./components/FormItem";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Form = /*#__PURE__*/memo(function (_ref) {
+var Form = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     itemMinWidth = _ref.itemMinWidth,
     footer = _ref.footer,
@@ -24,13 +24,16 @@ var Form = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
     className: cx(styles.form, className),
     colon: false,
-    layout: "horizontal"
+    layout: "horizontal",
+    ref: ref
   }, props), {}, {
     children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
       return /*#__PURE__*/_jsx(FormGroup, {
         icon: group === null || group === void 0 ? void 0 : group.icon,
         title: group.title,
-        children: group.children.map(function (item, itemIndex) {
+        children: group.children.filter(function (item) {
+          return !item.hidden;
+        }).map(function (item, itemIndex) {
           return /*#__PURE__*/_jsx(FormItem, _objectSpread({
             divider: itemIndex !== 0,
             minWidth: itemMinWidth

package/es/Form/style.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css;
+  var css = _ref.css,
+    token = _ref.token;
   return {
     footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  "]))),
-    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    .ant-form-item {\n      margin: 0 !important;\n    }\n\n    .ant-form-item .ant-form-item-label > label {\n      height: unset;\n    }\n\n    .ant-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .ant-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .ant-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n  "])))
+    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    .ant-form-item {\n      margin: 0 !important;\n    }\n\n    .ant-form-item .ant-form-item-label > label {\n      height: unset;\n    }\n\n    .ant-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .ant-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .ant-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .ant-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), token.borderRadius)
   };
 });

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 import { css } from 'antd-style';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-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  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n"])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-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  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .ant-switch-handle::before {\n    background: ", " !important;\n  }\n"])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText, token.colorBgContainer);
 });

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { keyframes } from 'antd-style';
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
@@ -8,10 +8,11 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
   var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
-    bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
-    gradientAnimation: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
-    noScrollbar: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
-    resetLinkColor: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
+    blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(36px);\n    "]))),
+    bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
+    gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
+    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
+    resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };
 };

package/es/types/customStylish.d.ts

@@ -1,5 +1,6 @@
 export interface LobeCustomStylish {
     blur: string;
+    blurStrong: string;
     bottomScrollbar: string;
     gradientAnimation: string;
     markdown: string;

package/package.json

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