@lobehub/ui 1.68.0 → 1.70.0

package/es/ChatItem/type.d.ts

@@ -0,0 +1,76 @@
+import { AlertProps } from 'antd';
+import { ReactNode } from 'react';
+import { EditableMessageProps } from "../EditableMessage";
+import { MetaData } from "../types";
+export interface ChatItemProps {
+    ErrorMessage?: ReactNode;
+    /**
+     * @description Actions to be displayed in the chat item
+     */
+    actions?: ReactNode;
+    /**
+     * @description Metadata for the avatar
+     */
+    avatar: MetaData;
+    avatarAddon?: ReactNode;
+    /**
+     * @description Whether to add border spacing
+     */
+    borderSpacing?: number | string;
+    /**
+     * @description Custom CSS class name for the chat item
+     */
+    className?: string;
+    /**
+     * @description Whether the chat item is in editing mode
+     */
+    editing?: boolean;
+    /**
+     * @description Props for Error render
+     */
+    error?: AlertProps;
+    /**
+     * @description Whether the chat item is in loading state
+     */
+    loading?: boolean;
+    /**
+     * @description The message content of the chat item
+     */
+    message?: ReactNode;
+    messageExtra?: ReactNode;
+    onAvatarClick?: () => void;
+    /**
+     * @description Callback when the message content changes
+     * @param value - The new message content
+     */
+    onChange?: (value: string) => void;
+    /**
+     * @description Callback when the editing mode changes
+     * @param editing - The new editing mode
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /**
+     * @description The placement of the chat item
+     * @default 'left'
+     */
+    placement?: 'left' | 'right';
+    /**
+     * @description Whether the chat item is primary
+     */
+    primary?: boolean;
+    renderMessage?: (content: ReactNode) => ReactNode;
+    /**
+     * @description Whether to show the title of the chat item
+     */
+    showTitle?: boolean;
+    text?: EditableMessageProps['text'];
+    /**
+     * @description The timestamp of the chat item
+     */
+    time?: number;
+    /**
+     * @description The type of the chat item
+     * @default 'block'
+     */
+    type?: 'block' | 'pure';
+}

package/es/ChatItem/type.js

@@ -0,0 +1 @@
+export {};

package/es/ChatList/Group.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ChatListItemProps } from './Item';
+interface ChatListGroup {
+    data: ChatListItemProps[];
+    meta: ChatListItemProps['meta'];
+}
+declare const Group: import("react").NamedExoticComponent<ChatListGroup>;
+export default Group;

package/es/ChatList/Group.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { useTheme } from 'antd-style';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Avatar from "../Avatar";
+import Item from "./Item";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Group = /*#__PURE__*/memo(function (_ref) {
+  var data = _ref.data,
+    meta = _ref.meta;
+  var _useState = useState(data[0].id),
+    _useState2 = _slicedToArray(_useState, 2),
+    active = _useState2[0],
+    setActive = _useState2[1];
+  var theme = useTheme();
+  var chatItem = useMemo(function () {
+    return data.find(function (item) {
+      return item.id === active;
+    }) || data[0];
+  }, [data, active]);
+  var Nav = useCallback(function () {
+    var count = 1;
+    return data.map(function (item) {
+      var _item$meta;
+      var avatar;
+      var isAvtive = active === item.id;
+      var metaAvatar = item === null || item === void 0 ? void 0 : (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.avatar;
+      switch (item.role) {
+        case 'assistant':
+          {
+            avatar = String(count);
+            break;
+          }
+        case 'function':
+          {
+            avatar = metaAvatar || '🧩';
+            break;
+          }
+        case 'system':
+          {
+            avatar = metaAvatar || '🚨';
+            break;
+          }
+        default:
+          {
+            avatar = metaAvatar || String(count);
+            break;
+          }
+      }
+      count++;
+      return /*#__PURE__*/_jsx(Avatar, {
+        avatar: avatar,
+        background: isAvtive ? theme.colorPrimary : theme.colorBgElevated,
+        onClick: function onClick() {
+          return setActive(item.id);
+        },
+        size: 20
+      }, item.id);
+    });
+  }, [active, data]);
+  return /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
+    groupNav: /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      gap: 4,
+      children: /*#__PURE__*/_jsx(Nav, {})
+    })
+  }, chatItem), {}, {
+    meta: meta
+  }));
+});
+export default Group;

package/es/ChatList/Item.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { type ChatItemProps } from "../ChatItem";
-import { ChatMessage, ChatMessageError } from "../types/chatMessage";
+import { ChatMessage, ChatMessageError, MessageRoleType } from "../types/chatMessage";
 import { type ActionsBarProps } from './ActionsBar';
 export type OnMessageChange = (id: string, content: string) => void;
 export type MessageExtra = (props: ChatMessage) => ReactNode;
@@ -8,6 +8,7 @@ export type OnActionClick = (actionKey: string, messageId: string) => void;
 export type RenderMessage = (content: ReactNode, message: ChatMessage) => ReactNode;
 export type RenderErrorMessage = (error: ChatMessageError, message: ChatMessage) => ReactNode;
 export interface ListItemProps {
+    groupNav?: ChatItemProps['avatarAddon'];
     loading?: boolean;
     /**
      * @description 点击操作按钮的回调函数
@@ -21,6 +22,11 @@ export interface ListItemProps {
      * @description 渲染错误消息的函数
      */
     renderErrorMessage?: RenderErrorMessage;
+    renderItem?: {
+        [role: MessageRoleType | string]: (data: {
+            key: string;
+        } & ChatMessage & ListItemProps) => ReactNode;
+    };
     /**
      * @description 渲染消息的函数
      */
@@ -46,5 +52,6 @@ export interface ListItemProps {
      */
     type?: 'docs' | 'chat';
 }
-declare const Item: import("react").NamedExoticComponent<ChatMessage & ListItemProps>;
+export type ChatListItemProps = ChatMessage & ListItemProps;
+declare const Item: import("react").NamedExoticComponent<ChatListItemProps>;
 export default Item;

package/es/ChatList/Item.js

@@ -1,27 +1,29 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["renderMessageExtra", "showTitle", "onActionClick", "onMessageChange", "type", "text", "renderMessage", "renderErrorMessage", "loading"];
+var _excluded = ["renderMessageExtra", "showTitle", "onActionClick", "onMessageChange", "type", "text", "renderMessage", "renderErrorMessage", "loading", "groupNav", "renderItem"];
 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 { App } from 'antd';
 import copy from 'copy-to-clipboard';
-import { memo, useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import ChatItem from "../ChatItem";
 import ActionsBar from "./ActionsBar";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Item = /*#__PURE__*/memo(function (_ref) {
+var Item = /*#__PURE__*/memo(function (props) {
   var _item$error;
-  var MessageExtra = _ref.renderMessageExtra,
-    showTitle = _ref.showTitle,
-    _onActionClick = _ref.onActionClick,
-    onMessageChange = _ref.onMessageChange,
-    type = _ref.type,
-    text = _ref.text,
-    renderMessage = _ref.renderMessage,
-    renderErrorMessage = _ref.renderErrorMessage,
-    loading = _ref.loading,
-    item = _objectWithoutProperties(_ref, _excluded);
+  var MessageExtra = props.renderMessageExtra,
+    showTitle = props.showTitle,
+    _onActionClick = props.onActionClick,
+    onMessageChange = props.onMessageChange,
+    type = props.type,
+    text = props.text,
+    renderMessage = props.renderMessage,
+    renderErrorMessage = props.renderErrorMessage,
+    loading = props.loading,
+    groupNav = props.groupNav,
+    renderItem = props.renderItem,
+    item = _objectWithoutProperties(props, _excluded);
   var renderMessageExtra = MessageExtra ? /*#__PURE__*/_jsx(MessageExtra, _objectSpread({}, item)) : undefined;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -32,6 +34,10 @@ var Item = /*#__PURE__*/memo(function (_ref) {
   var innerRenderMessage = useCallback(function (content) {
     return renderMessage === null || renderMessage === void 0 ? void 0 : renderMessage(content, item);
   }, [renderMessage, item]);
+  var RenderItem = useMemo(function () {
+    return renderItem && renderItem[item.role] ? renderItem[item.role] : undefined;
+  }, [renderItem]);
+  if (RenderItem) return /*#__PURE__*/_jsx(RenderItem, _objectSpread({}, props), item.id);
   return /*#__PURE__*/_jsx(ChatItem, {
     ErrorMessage: item.error ? renderErrorMessage === null || renderErrorMessage === void 0 ? void 0 : renderErrorMessage(item.error, item) : undefined,
     actions: /*#__PURE__*/_jsx(ActionsBar, {
@@ -55,6 +61,7 @@ var Item = /*#__PURE__*/memo(function (_ref) {
       text: text
     }),
     avatar: item.meta,
+    avatarAddon: groupNav,
     editing: editing,
     error: item.error ? {
       message: (_item$error = item.error) === null || _item$error === void 0 ? void 0 : _item$error.message

package/es/ChatList/index.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
-import type { ChatMessage, DivProps, MessageRoleType } from "../types";
+/// <reference types="react" />
+import type { ChatMessage, DivProps } from "../types";
 import { ListItemProps } from './Item';
 export interface ChatListProps extends DivProps, ListItemProps {
     /**
@@ -7,11 +7,6 @@ export interface ChatListProps extends DivProps, ListItemProps {
      */
     data: ChatMessage[];
     loadingId?: string;
-    renderItem?: {
-        [role: MessageRoleType | string]: (data: {
-            key: string;
-        } & ChatMessage & ListItemProps) => ReactNode;
-    };
 }
 export type { OnActionClick, OnMessageChange, RenderErrorMessage, RenderMessage } from './Item';
 declare const ChatList: import("react").NamedExoticComponent<ChatListProps>;

package/es/ChatList/index.js

@@ -4,6 +4,7 @@ var _excluded = ["onActionClick", "renderMessageExtra", "className", "data", "ty
 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 { memo } from 'react';
+import Group from "./Group";
 import Item from "./Item";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,20 +30,28 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.container, className)
   }, props), {}, {
     children: data.map(function (item) {
-      var key = item.id;
-      var props = _objectSpread({
+      var _item$children;
+      var props = {
         loading: loadingId === item.id,
         onActionClick: onActionClick,
         onMessageChange: onMessageChange,
         renderErrorMessage: renderErrorMessage,
+        renderItem: renderItem,
         renderMessage: renderMessage,
         renderMessageExtra: MessageExtra,
         showTitle: showTitle,
         text: text,
         type: type
-      }, item);
-      var Render = renderItem && renderItem[item.role] ? renderItem[item.role] : Item;
-      return /*#__PURE__*/_jsx(Render, _objectSpread({}, props), key);
+      };
+      if (item.children && ((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length) > 0) {
+        return /*#__PURE__*/_jsx(Group, {
+          data: item.children.map(function (childrenItem) {
+            return _objectSpread(_objectSpread({}, props), childrenItem);
+          }),
+          meta: item.meta
+        }, item.children[0].id);
+      }
+      return /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({}, props), item), item.id);
     })
   }));
 });

package/es/GridBackground/Grid.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+declare enum Line {
+    l7 = 0,
+    l6 = 1,
+    l5 = 2,
+    l4 = 3,
+    l3 = 4,
+    l2 = 5,
+    l1 = 6,
+    center = 7,
+    r1 = 8,
+    r2 = 9,
+    r3 = 10,
+    r4 = 11,
+    r5 = 12,
+    r6 = 13,
+    r7 = 14
+}
+export interface GridProps extends DivProps {
+    color?: string;
+    linePick?: Line;
+    strokeWidth?: number;
+}
+declare const Grid: import("react").NamedExoticComponent<GridProps>;
+export default Grid;

package/es/GridBackground/Grid.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["color", "strokeWidth", "linePick"];
+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 { isUndefined } from 'lodash-es';
+import { memo, useCallback } from 'react';
+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 Line = /*#__PURE__*/function (Line) {
+  Line[Line["l7"] = 0] = "l7";
+  Line[Line["l6"] = 1] = "l6";
+  Line[Line["l5"] = 2] = "l5";
+  Line[Line["l4"] = 3] = "l4";
+  Line[Line["l3"] = 4] = "l3";
+  Line[Line["l2"] = 5] = "l2";
+  Line[Line["l1"] = 6] = "l1";
+  Line[Line["center"] = 7] = "center";
+  Line[Line["r1"] = 8] = "r1";
+  Line[Line["r2"] = 9] = "r2";
+  Line[Line["r3"] = 10] = "r3";
+  Line[Line["r4"] = 11] = "r4";
+  Line[Line["r5"] = 12] = "r5";
+  Line[Line["r6"] = 13] = "r6";
+  Line[Line["r7"] = 14] = "r7";
+  return Line;
+}(Line || {});
+var Grid = /*#__PURE__*/memo(function (_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#fff' : _ref$color,
+    _ref$strokeWidth = _ref.strokeWidth,
+    strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
+    linePick = _ref.linePick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isUnpick = isUndefined(linePick);
+  var showLine = useCallback(function (l) {
+    return isUnpick || linePick === l;
+  }, [linePick]);
+  var vLine = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showLine(Line.l7) && /*#__PURE__*/_jsx("path", {
+      d: "M2 420v-60.343c0-21.82 14.15-41.12 34.959-47.684L1026 0h0"
+    }), showLine(Line.l6) && /*#__PURE__*/_jsx("path", {
+      d: "M268 420v-62.077c0-20.977 13.094-39.724 32.789-46.944L1149 0h0"
+    }), showLine(Line.l5) && /*#__PURE__*/_jsx("path", {
+      d: "M534 420v-64.358a50 50 0 0129.884-45.775L1269 0h0"
+    }), showLine(Line.l4) && /*#__PURE__*/_jsx("path", {
+      d: "M800 420v-67.395a50 50 0 0125.958-43.84L1389 0h0"
+    }), showLine(Line.l3) && /*#__PURE__*/_jsx("path", {
+      d: "M1066 420v-71.645a50 50 0 0120.456-40.337L1507 0h0"
+    }), showLine(Line.l2) && /*#__PURE__*/_jsx("path", {
+      d: "M1332 420v-77.506a50 50 0 0113.194-33.843L1629 0h0"
+    }), showLine(Line.l1) && /*#__PURE__*/_jsx("path", {
+      d: "M1598 420v-86.225a50 50 0 014.438-20.594L1744 0h0"
+    }), showLine(Line.center) && /*#__PURE__*/_jsx("path", {
+      d: "M1864 420V0h0"
+    }), showLine(Line.r1) && /*#__PURE__*/_jsx("path", {
+      d: "M2130 420v-86.225a50 50 0 00-4.438-20.594L1984 0h0"
+    }), showLine(Line.r2) && /*#__PURE__*/_jsx("path", {
+      d: "M2396 420v-77.506a50 50 0 00-13.194-33.843L2099 0h0"
+    }), showLine(Line.r3) && /*#__PURE__*/_jsx("path", {
+      d: "M2662 420v-71.645a50 50 0 00-20.456-40.337L2221 0h0"
+    }), showLine(Line.r4) && /*#__PURE__*/_jsx("path", {
+      d: "M2928 420v-67.395a50 50 0 00-25.958-43.84L2339 0h0"
+    }), showLine(Line.r5) && /*#__PURE__*/_jsx("path", {
+      d: "M3194 420v-64.358a50 50 0 00-29.884-45.775L2459 0h0"
+    }), showLine(Line.r6) && /*#__PURE__*/_jsx("path", {
+      d: "M3460 420v-62.077c0-20.977-13.094-39.724-32.789-46.944L2579 0h0"
+    }), showLine(Line.r7) && /*#__PURE__*/_jsx("path", {
+      d: "M3726 420v-60.343c0-21.82-14.15-41.12-34.959-47.684L2702 0h0"
+    })]
+  });
+  var hLine = isUnpick && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M2835 42H892"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M595 136h2538"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M237 249h3254"
+    })]
+  });
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsx("svg", {
+      style: {
+        width: '100%'
+      },
+      viewBox: "0 0 3728 422",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/_jsxs("g", {
+        fill: "none",
+        fillRule: "evenodd",
+        stroke: color,
+        strokeWidth: strokeWidth,
+        children: [vLine, hLine]
+      })
+    })
+  }));
+});
+export default Grid;

package/es/GridBackground/GridShowcase.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+import { type GridBackgroundProps } from './index';
+export interface GridShowcaseProps extends DivProps {
+    backgroundColor?: GridBackgroundProps['backgroundColor'];
+}
+declare const GridShowcase: import("react").NamedExoticComponent<GridShowcaseProps>;
+export default GridShowcase;

package/es/GridBackground/GridShowcase.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["style", "children", "backgroundColor"];
+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 { useTheme } from 'antd-style';
+import { rgba } from 'polished';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import GridBackground from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GridShowcase = /*#__PURE__*/memo(function (_ref) {
+  var style = _ref.style,
+    children = _ref.children,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? '#001dff' : _ref$backgroundColor,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    style: _objectSpread({
+      position: 'relative'
+    }, style)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      colorBack: rgba(theme.colorText, 0.12),
+      colorFront: rgba(theme.colorText, 0.6),
+      flip: true
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      style: {
+        zIndex: 4
+      },
+      children: children
+    }), /*#__PURE__*/_jsx(GridBackground, {
+      animation: true,
+      backgroundColor: backgroundColor,
+      colorBack: rgba(theme.colorText, 0.24),
+      colorFront: theme.colorText,
+      random: true,
+      showBackground: true,
+      style: {
+        zIndex: 0
+      }
+    })]
+  }));
+});
+export default GridShowcase;

package/es/GridBackground/index.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface GridBackgroundProps extends DivProps {
+    animation?: boolean;
+    animationDuration?: number;
+    backgroundColor?: string;
+    colorBack?: string;
+    colorFront?: string;
+    flip?: boolean;
+    random?: boolean;
+    reverse?: boolean;
+    showBackground?: boolean;
+    strokeWidth?: number;
+}
+declare const GridBackground: import("react").NamedExoticComponent<GridBackgroundProps>;
+export default GridBackground;

package/es/GridBackground/index.js

@@ -0,0 +1,87 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["flip", "reverse", "showBackground", "backgroundColor", "random", "animationDuration", "className", "colorFront", "colorBack", "strokeWidth", "style", "animation"];
+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 { useSize } from 'ahooks';
+import { shuffle } from 'lodash-es';
+import { memo, useCallback, useMemo, useRef } from 'react';
+import Grid from "./Grid";
+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 GridBackground = /*#__PURE__*/memo(function (_ref) {
+  var flip = _ref.flip,
+    reverse = _ref.reverse,
+    showBackground = _ref.showBackground,
+    backgroundColor = _ref.backgroundColor,
+    random = _ref.random,
+    _ref$animationDuratio = _ref.animationDuration,
+    animationDuration = _ref$animationDuratio === void 0 ? 8 : _ref$animationDuratio,
+    className = _ref.className,
+    colorFront = _ref.colorFront,
+    colorBack = _ref.colorBack,
+    strokeWidth = _ref.strokeWidth,
+    style = _ref.style,
+    animation = _ref.animation,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = useRef(null);
+  var size = useSize(ref);
+  var _useStyles = useStyles({
+      backgroundColor: backgroundColor,
+      reverse: reverse
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var gridProps = useMemo(function () {
+    return {
+      className: styles.highlight,
+      color: colorFront,
+      strokeWidth: strokeWidth
+    };
+  }, [reverse, colorFront, strokeWidth]);
+  var HighlightGrid = useCallback(function () {
+    if (!random) return /*#__PURE__*/_jsx(Grid, _objectSpread({
+      style: {
+        '--duration': "".concat(animationDuration, "s")
+      }
+    }, gridProps));
+    var group = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: shuffle(group).map(function (item, index) {
+        return /*#__PURE__*/_jsx(Grid, _objectSpread({
+          linePick: item,
+          style: {
+            '--delay': "".concat(index + Math.random(), "s"),
+            '--duration': "".concat(animationDuration, "s")
+          }
+        }, gridProps), item);
+      })
+    });
+  }, [random, animationDuration, gridProps]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    ref: ref,
+    style: flip ? _objectSpread({
+      transform: 'scaleY(-1)'
+    }, style) : style
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(Grid, {
+      color: colorBack,
+      strokeWidth: strokeWidth,
+      style: {
+        zIndex: 2
+      }
+    }), animation && /*#__PURE__*/_jsx(HighlightGrid, {}), showBackground && /*#__PURE__*/_jsx("div", {
+      className: styles.backgroundContainer,
+      style: size ? {
+        fontSize: size.width / 80
+      } : {},
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.background
+      })
+    })]
+  }));
+});
+export default GridBackground;

package/es/GridBackground/style.d.ts

@@ -0,0 +1,9 @@
+export declare const useStyles: (props?: {
+    backgroundColor?: string | undefined;
+    reverse?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    background: import("antd-style").SerializedStyles;
+    backgroundContainer: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    highlight: import("antd-style").SerializedStyles;
+}>;

package/es/GridBackground/style.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles, keyframes } from 'antd-style';
+import chroma from 'chroma-js';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token;
+  var reverse = _ref2.reverse,
+    _ref2$backgroundColor = _ref2.backgroundColor,
+    backgroundColor = _ref2$backgroundColor === void 0 ? 'blue' : _ref2$backgroundColor;
+  var highlightAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      mask-position: 100% 0%;\n    }\n    16%,100% {\n      mask-position: 100% 200%;\n    }\n  "])));
+  var highlightAnimationReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n      mask-position: 100% 200%;\n    }\n    16%,100% {\n      mask-position: 100% 0%;\n    }\n  "])));
+  var scale = chroma.bezier([token.colorText, backgroundColor, token.colorBgLayout]).scale().mode('lch').correctLightness().colors(6);
+  var width = 24;
+  var height = 36;
+  return {
+    background: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: absolute;\n        top: ", "%;\n        left: ", "%;\n        transform: rotateX(60deg);\n\n        width: ", "%;\n        height: ", "%;\n\n        background: ", ";\n        filter: blur(2em) saturate(400%);\n        border-radius: 50%;\n        box-shadow:\n          0 0 1em 2em ", ",\n          0 0 3em 6em ", ",\n          0 0 6em 10em ", ",\n          0 0 8em 16em ", ";\n      "])), 60 - height / 2, 50 - width / 2, width, height, scale[1], scale[1], scale[2], scale[3], scale[4]),
+    backgroundContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: -1;\n        inset: 0;\n\n        width: 100%;\n        height: 100%;\n\n        perspective: 200px;\n      "]))),
+    container: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        position: relative;\n\n        mask-image: linear-gradient(to bottom, transparent, #fff 30%, #fff 70%, transparent);\n        mask-size: cover;\n      "]))),
+    highlight: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        --duration: 6s;\n        --delay: 0s;\n\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        animation: ", " var(--duration)\n          cubic-bezier(0.62, 0.62, 0.28, 0.67) infinite;\n        animation-delay: var(--delay);\n\n        mask-image: linear-gradient(to bottom, transparent 40%, #fff 60%, transparent);\n        mask-size: 100% 200%;\n      "])), reverse ? highlightAnimationReverse : highlightAnimation)
+  };
+});