@lobehub/ui 1.121.0 → 1.122.1

package/es/Form/components/FormGroup.js

@@ -1,35 +1,77 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "icon", "title", "children", "extra"];
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["className", "icon", "title", "children", "extra", "itemsType", "variant", "defaultActive"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Icon } from "../..";
 import { Collapse } from 'antd';
-import { useResponsive } from 'antd-style';
+import { createStyles, 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";
-var FormGroup = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
-    icon = _ref.icon,
-    title = _ref.title,
-    children = _ref.children,
-    extra = _ref.extra,
-    rest = _objectWithoutProperties(_ref, _excluded);
+export var useStyles = createStyles(function (_ref, variant) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode,
+    responsive = _ref.responsive,
+    prefixCls = _ref.prefixCls;
+  var pureStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background: transparent;\n      border: none;\n      border-radius: 0;\n\n      .", "-collapse-header {\n        background: transparent !important;\n        border-radius: 0 !important;\n      }\n\n      .", "-collapse-content-box {\n        background: transparent;\n        border-radius: 0;\n      }\n    "])), prefixCls, prefixCls);
+  var blockStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: none;\n      border-radius: ", "px;\n\n      .", "-collapse-content {\n        border: none !important;\n      }\n    "])), token.colorFillQuaternary, token.borderRadiusLG, prefixCls);
+  var ghostStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: transparent;\n      border: 1px solid ", ";\n      .", "-collapse-header {\n        background: transparent !important;\n      }\n\n      .", "-collapse-content-box {\n        background: transparent;\n      }\n    "])), token.colorBorderSecondary, prefixCls, prefixCls);
+  var defaultStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n    "])), token.colorFillQuaternary, token.colorBorderSecondary, token.borderRadiusLG);
+  var variantStyle = cx(variant === 'default' && defaultStyle, variant === 'block' && blockStyle, variant === 'ghost' && ghostStyle, variant === 'pure' && pureStyle);
+  return {
+    flatGroup: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          padding-inline: 16px;\n        "]))), variantStyle),
+    group: cx(isDarkMode && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            .", "-collapse-content {\n              background: transparent;\n              border-color: ", ";\n            }\n\n            .", "-collapse-header {\n              background: ", ";\n            }\n          "])), prefixCls, token.colorBorderSecondary, prefixCls, token.colorFillTertiary), css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          overflow: hidden;\n\n          .", "-collapse-item {\n            border: none;\n          }\n\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, prefixCls), variantStyle),
+    icon: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        transition: all 100ms ", ";\n      "])), token.motionEaseOut),
+    mobileGroupBody: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        padding: 0 16px;\n        background: ", ";\n      "])), token.colorBgContainer),
+    mobileGroupHeader: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        padding: 16px;\n        background: ", ";\n      "])), token.colorBgLayout),
+    title: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        align-items: center;\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)
+  };
+});
+var FormGroup = /*#__PURE__*/memo(function (_ref2) {
+  var className = _ref2.className,
+    icon = _ref2.icon,
+    title = _ref2.title,
+    children = _ref2.children,
+    extra = _ref2.extra,
+    itemsType = _ref2.itemsType,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    _ref2$defaultActive = _ref2.defaultActive,
+    defaultActive = _ref2$defaultActive === void 0 ? true : _ref2$defaultActive,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(variant),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var titleContent = /*#__PURE__*/_jsxs("div", {
+  var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
     className: styles.title,
+    gap: 8,
+    horizontal: true,
     children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon
     }), title]
   });
+  if (itemsType === 'flat') {
+    if (mobile) return /*#__PURE__*/_jsx(Flexbox, {
+      className: className,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.mobileGroupBody,
+        children: children
+      })
+    });
+    return /*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.flatGroup, className),
+      children: children
+    });
+  }
   if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
     className: className,
     children: [/*#__PURE__*/_jsxs(Flexbox, {
@@ -44,9 +86,9 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
   });
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
     className: cx(styles.group, className),
-    defaultActiveKey: [1],
-    expandIcon: function expandIcon(_ref2) {
-      var isActive = _ref2.isActive;
+    defaultActiveKey: defaultActive ? [1] : undefined,
+    expandIcon: function expandIcon(_ref3) {
+      var isActive = _ref3.isActive;
       return /*#__PURE__*/_jsx(Icon, {
         className: styles.icon,
         icon: ChevronDown,

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

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { FormItemProps as AntdFormItemProps } from 'antd';
 import { type FormTitleProps } from './FormTitle';
+export declare const useStyles: (props?: string | number | undefined) => import("antd-style").ReturnStyles<{
+    item: import("antd-style").SerializedStyles;
+    itemNoDivider: import("antd-style").SerializedStyles;
+}>;
 export interface FormItemProps extends AntdFormItemProps {
     avatar?: FormTitleProps['avatar'];
     desc?: FormTitleProps['desc'];

package/es/Form/components/FormItem.js

@@ -1,27 +1,39 @@
 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 = ["desc", "tag", "minWidth", "avatar", "className", "label", "children", "divider"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Form } from 'antd';
+import { createStyles } from 'antd-style';
+import { isNumber } from 'lodash-es';
 import { memo } from 'react';
 import FormDivider from "./FormDivider";
 import FormTitle from "./FormTitle";
-import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 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,
-    avatar = _ref.avatar,
-    className = _ref.className,
-    label = _ref.label,
-    children = _ref.children,
-    divider = _ref.divider,
-    rest = _objectWithoutProperties(_ref, _excluded);
+export var useStyles = createStyles(function (_ref, itemMinWidth) {
+  var css = _ref.css,
+    responsive = _ref.responsive,
+    prefixCls = _ref.prefixCls;
+  return {
+    item: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 16px 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(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        .", "-form-item-control {\n          width: ", ";\n        }\n      "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile, itemMinWidth ? css(_templateObject3 || (_templateObject3 = _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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-wrap: wrap;\n                gap: 4px;\n              }\n            "])), prefixCls)),
+    itemNoDivider: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      &:not(:first-child) {\n        padding-top: 0;\n      }\n    "])))
+  };
+});
+var FormItem = /*#__PURE__*/memo(function (_ref2) {
+  var desc = _ref2.desc,
+    tag = _ref2.tag,
+    minWidth = _ref2.minWidth,
+    avatar = _ref2.avatar,
+    className = _ref2.className,
+    label = _ref2.label,
+    children = _ref2.children,
+    divider = _ref2.divider,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(minWidth),
     cx = _useStyles.cx,
     styles = _useStyles.styles;

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

@@ -1,5 +1,8 @@
 import { ReactNode } from 'react';
 import { DivProps } from "../../types";
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    formTitle: import("antd-style").SerializedStyles;
+}>;
 export interface FormTitleProps extends DivProps {
     avatar?: ReactNode;
     desc?: ReactNode;

package/es/Form/components/FormTitle.js

@@ -1,20 +1,31 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Tag from "../../Tag";
-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,
-    avatar = _ref.avatar;
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    formTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\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.2;\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)
+  };
+});
+var FormTitle = /*#__PURE__*/memo(function (_ref2) {
+  var className = _ref2.className,
+    tag = _ref2.tag,
+    title = _ref2.title,
+    desc = _ref2.desc,
+    avatar = _ref2.avatar;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var titleNode = /*#__PURE__*/_jsxs("div", {
+  var titleNode = /*#__PURE__*/_jsxs(Flexbox, {
     className: cx(styles.formTitle, className),
+    gap: 6,
     children: [/*#__PURE__*/_jsxs(Flexbox, {
       align: 'center',
       direction: 'horizontal',

package/es/Form/index.d.ts

@@ -1,9 +1,10 @@
 import { FormProps as AntFormProps, type FormInstance } from 'antd';
 import { type ReactNode, RefAttributes } from 'react';
-import FormGroup, { type FormGroupProps } from './components/FormGroup';
+import FormGroup, { type FormGroupProps, FormVariant, ItemsType } from './components/FormGroup';
 import FormItem, { type FormItemProps } from './components/FormItem';
 export interface ItemGroup {
     children: FormItemProps[] | ReactNode;
+    defaultActive?: boolean;
     extra?: FormGroupProps['extra'];
     icon?: FormGroupProps['icon'];
     title: FormGroupProps['title'];
@@ -12,7 +13,9 @@ export interface FormProps extends AntFormProps {
     children?: ReactNode;
     footer?: ReactNode;
     itemMinWidth?: FormItemProps['minWidth'];
-    items?: ItemGroup[];
+    items?: ItemGroup[] | FormItemProps[];
+    itemsType?: ItemsType;
+    variant?: FormVariant;
 }
 export interface IForm {
     (props: FormProps & RefAttributes<FormInstance>): ReactNode;

package/es/Form/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children"];
+var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Form as AntForm } from 'antd';
@@ -16,12 +16,37 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     itemMinWidth = _ref.itemMinWidth,
     footer = _ref.footer,
     form = _ref.form,
-    items = _ref.items,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
     children = _ref.children,
+    _ref$itemsType = _ref.itemsType,
+    itemsType = _ref$itemsType === void 0 ? 'tree' : _ref$itemsType,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var mapFlat = function mapFlat(item, itemIndex) {
+    return /*#__PURE__*/_jsx(FormItem, _objectSpread({
+      divider: itemIndex !== 0,
+      minWidth: itemMinWidth
+    }, item), itemIndex);
+  };
+  var mapTree = function mapTree(group, groupIndex) {
+    return /*#__PURE__*/_jsx(FormGroup, {
+      defaultActive: group === null || group === void 0 ? void 0 : group.defaultActive,
+      extra: group === null || group === void 0 ? void 0 : group.extra,
+      icon: group === null || group === void 0 ? void 0 : group.icon,
+      title: group.title,
+      variant: variant,
+      children: Array.isArray(group.children) ? group.children.filter(function (item) {
+        return !item.hidden;
+      }).map(function (item, i) {
+        return mapFlat(item, i);
+      }) : group.children
+    }, groupIndex);
+  };
   return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
     className: cx(styles.form, className),
     colon: false,
@@ -29,21 +54,17 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     layout: "horizontal",
     ref: ref
   }, rest), {}, {
-    children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
-      return /*#__PURE__*/_jsx(FormGroup, {
-        extra: group === null || group === void 0 ? void 0 : group.extra,
-        icon: group === null || group === void 0 ? void 0 : group.icon,
-        title: group.title,
-        children: Array.isArray(group.children) ? group.children.filter(function (item) {
-          return !item.hidden;
-        }).map(function (item, itemIndex) {
-          return /*#__PURE__*/_jsx(FormItem, _objectSpread({
-            divider: itemIndex !== 0,
-            minWidth: itemMinWidth
-          }, item), itemIndex);
-        }) : group.children
-      }, groupIndex);
-    }), children, footer && /*#__PURE__*/_jsx(FormFooter, {
+    children: [(items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'tree' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
+      return mapTree(item, i);
+    }) : /*#__PURE__*/_jsx(FormGroup, {
+      itemsType: 'flat',
+      variant: variant,
+      children: items === null || items === void 0 ? void 0 : items.filter(function (item) {
+        return !item.hidden;
+      }).map(function (item, i) {
+        return mapFlat(item, i);
+      })
+    }) : null, children, footer && /*#__PURE__*/_jsx(FormFooter, {
       children: footer
     })]
   }));

package/es/Form/style.d.ts

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

package/es/Form/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -7,7 +7,6 @@ export var useStyles = createStyles(function (_ref) {
     prefixCls = _ref.prefixCls,
     responsive = _ref.responsive;
   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    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius)
+    form: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    width: 100%;\n\n    ", " {\n      gap: 0;\n    }\n\n    .", "-form-item {\n      margin: 0 !important;\n    }\n\n    .", "-form-item .", "-form-item-label > label {\n      height: unset;\n    }\n\n    .", "-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .", "-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .", "-form-item-row {\n      align-items: center;\n    }\n\n    .", "-form-item-control {\n      position: relative;\n\n      display: flex;\n      flex: 0;\n      align-items: center;\n\n      min-width: unset !important;\n    }\n\n    .", "-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), responsive.mobile, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, prefixCls, token.borderRadius)
   };
 });

package/es/GaussianBackground/index.d.ts

@@ -0,0 +1,17 @@
+import { PropsWithChildren } from 'react';
+import { DivProps } from "../types";
+import { ColorLayer } from './vendor/gaussianBackground';
+export interface GaussianBackgroundProps extends PropsWithChildren, DivProps {
+    classNames?: {
+        canvas?: string;
+        content?: string;
+    };
+    layers: ColorLayer[];
+    options?: {
+        blurRadius?: number;
+        fpsCap?: number;
+        scale?: number;
+    };
+}
+declare const GaussianBackground: import("react").NamedExoticComponent<GaussianBackgroundProps>;
+export default GaussianBackground;

package/es/GaussianBackground/index.js

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["layers", "options", "className", "children", "classNames", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { memo, useEffect, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useGaussianBackground } from "./useGaussianBackground";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_OPTIONS = {
+  blurRadius: 16,
+  fpsCap: 60,
+  scale: 16
+};
+var GaussianBackground = /*#__PURE__*/memo(function (_ref) {
+  var layers = _ref.layers,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? DEFAULT_OPTIONS : _ref$options,
+    className = _ref.className,
+    children = _ref.children,
+    classNames = _ref.classNames,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var run = useGaussianBackground(ref);
+  useEffect(function () {
+    if (!run) return;
+    run(layers, options);
+  }, [run, options, layers]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: style
+  }, rest), {}, {
+    children: [/*#__PURE__*/_jsx("canvas", {
+      className: cx(styles.canvas, classNames === null || classNames === void 0 ? void 0 : classNames.canvas),
+      ref: ref
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: cx(styles.content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+      children: children
+    })]
+  }));
+});
+export default GaussianBackground;

package/es/GaussianBackground/style.d.ts

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

package/es/GaussianBackground/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 {
+    canvas: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    width: 100%;\n    height: 100%;\n  "]))),
+    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n  "])))
+  };
+});

package/es/GaussianBackground/useGaussianBackground.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+import { ColorLayer } from './vendor/gaussianBackground';
+export declare const useGaussianBackground: (ref: RefObject<HTMLCanvasElement>) => (layers: ColorLayer[], options?: {
+    blurRadius?: number;
+    fpsCap?: number;
+    scale?: number;
+}) => void;

package/es/GaussianBackground/useGaussianBackground.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback, useEffect, useState } from 'react';
+import GaussianBackgroundClient from "./vendor/gaussianBackground";
+export var useGaussianBackground = function useGaussianBackground(ref) {
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
+  useEffect(function () {
+    if (!ref.current) return;
+    setClient(new GaussianBackgroundClient(ref.current));
+  }, []);
+  var handleRun = useCallback(function (layers, options) {
+    if (!client) return;
+    if (options) client.updateOptions(options);
+    client.run(layers);
+  }, [client]);
+  return handleRun;
+};

package/es/GaussianBackground/vendor/gaussianBackground.d.ts

@@ -0,0 +1,38 @@
+export interface ColorLayer {
+    color: string;
+    maxVelocity?: number;
+    orbs?: number;
+    radius?: number;
+    splitX?: number;
+    splitY?: number;
+}
+export interface GaussianBackgroundOptions {
+    blurRadius?: number;
+    fpsCap?: number;
+    scale?: number;
+}
+declare class GaussianBackground {
+    private fpsAverage?;
+    private canvas;
+    private context;
+    private animationFrame;
+    private timestep;
+    private firstCallTime;
+    private lastCallTime;
+    private timeElapsed;
+    private fpsTotal;
+    private layers;
+    private options;
+    constructor(node: HTMLCanvasElement, options?: GaussianBackgroundOptions);
+    run(layers: ColorLayer[]): void;
+    private generateLayer;
+    private createOrb;
+    private displayLoop;
+    drawBackground(): void;
+    private drawBlur;
+    private updateLayers;
+    updateOptions({ blurRadius, fpsCap, scale, }: Partial<GaussianBackgroundOptions>): void;
+    prototype(): void;
+    play(): void;
+}
+export default GaussianBackground;