@lobehub/ui 1.87.1 → 1.88.0

package/es/ChatList/Group.js

@@ -2,10 +2,8 @@ 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 { memo, useMemo, useState } from 'react';
+import GroupNav from "./GroupNav";
 import Item from "./Item";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Group = /*#__PURE__*/memo(function (_ref) {
@@ -15,57 +13,16 @@ var Group = /*#__PURE__*/memo(function (_ref) {
     _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, {})
+    groupNav: /*#__PURE__*/_jsx(GroupNav, {
+      active: active,
+      data: data,
+      setActive: setActive
     })
   }, chatItem), {}, {
     meta: meta

package/es/ChatList/GroupNav.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ChatListItemProps } from "./Item";
+interface GroupNavProps {
+    active: string;
+    data: ChatListItemProps[];
+    setActive: (id: string) => void;
+}
+declare const GroupNav: import("react").NamedExoticComponent<GroupNavProps>;
+export default GroupNav;

package/es/ChatList/GroupNav.js

@@ -0,0 +1,54 @@
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Avatar from "../Avatar";
+import { jsx as _jsx } from "react/jsx-runtime";
+var GroupNav = /*#__PURE__*/memo(function (_ref) {
+  var data = _ref.data,
+    active = _ref.active,
+    setActive = _ref.setActive;
+  var theme = useTheme();
+  var count = 1;
+  return /*#__PURE__*/_jsx(Flexbox, {
+    align: 'center',
+    gap: 4,
+    children: 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);
+    })
+  });
+});
+export default GroupNav;

package/es/ChatList/Item.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+import { type FC, type ReactNode } from 'react';
 import { type ChatItemProps } from "../ChatItem";
 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;
+export type MessageExtra = FC<ChatMessage>;
 export type OnActionClick = (actionKey: string, messageId: string) => void;
 export type RenderMessage = (content: ReactNode, message: ChatMessage) => ReactNode;
 export type RenderErrorMessage = (error: ChatMessageError, message: ChatMessage) => ReactNode;

package/es/Features/Item.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
-import { useStyles } from "./Item.style";
+import { useStyles } from "./style";
 
 // @ts-ignore
 import { jsx as _jsx } from "react/jsx-runtime";

package/es/Features/index.d.ts

@@ -1,13 +1,11 @@
 import { CSSProperties } from 'react';
+import { SpotlightCardProps } from "../SpotlightCard";
 import { DivProps } from "../types";
 import { type FeatureItem } from './Item';
 export type { FeatureItem } from './Item';
 export interface FeaturesProps extends DivProps {
-    /**
-     * @description The maximum width of the content
-     * @default 960
-     */
-    contentMaxWidth?: number;
+    columns?: SpotlightCardProps['columns'];
+    gap?: SpotlightCardProps['gap'];
     /**
      * @description The class name of the item
      */
@@ -20,6 +18,7 @@ export interface FeaturesProps extends DivProps {
      * @description The array of feature items
      */
     items: FeatureItem[];
+    maxWidth?: number;
 }
 declare const Features: import("react").NamedExoticComponent<FeaturesProps>;
 export default Features;

package/es/Features/index.js

@@ -1,33 +1,34 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "contentMaxWidth", "className", "itemClassName", "itemStyle"];
+var _excluded = ["items", "className", "itemClassName", "itemStyle", "maxWidth", "style"];
 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 SpotlightCard from "../SpotlightCard";
 import { default as Item } from "./Item";
-import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Features = /*#__PURE__*/memo(function (_ref) {
   var items = _ref.items,
-    _ref$contentMaxWidth = _ref.contentMaxWidth,
-    contentMaxWidth = _ref$contentMaxWidth === void 0 ? 960 : _ref$contentMaxWidth,
     className = _ref.className,
     itemClassName = _ref.itemClassName,
     itemStyle = _ref.itemStyle,
-    properties = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(contentMaxWidth),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? 960 : _ref$maxWidth,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
   if (!(items !== null && items !== void 0 && items.length)) return;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(styles.container, className)
-  }, properties), {}, {
-    children: items.map(function (item) {
+  return /*#__PURE__*/_jsx(SpotlightCard, _objectSpread({
+    className: className,
+    items: items,
+    renderItem: function renderItem(item) {
       return /*#__PURE__*/_jsx(Item, _objectSpread({
         className: itemClassName,
         style: itemStyle
       }, item), item.title);
-    })
-  }));
+    },
+    style: _objectSpread({
+      maxWidth: maxWidth
+    }, style)
+  }, props));
 });
 export default Features;

package/es/Features/style.d.ts

@@ -1,3 +1,12 @@
-export declare const useStyles: (props?: number | undefined) => import("antd-style").ReturnStyles<{
-    container: string;
+export declare const useStyles: (props?: {
+    hasLink?: boolean | undefined;
+    rowNum: number;
+} | undefined) => import("antd-style").ReturnStyles<{
+    cell: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    desc: string;
+    img: string;
+    imgContainer: string;
+    link: import("antd-style").SerializedStyles;
+    title: string;
 }>;

package/es/Features/style.js

@@ -1,18 +1,30 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, contentMaxWidth) {
-  var prefixCls = _ref.prefixCls,
-    responsive = _ref.responsive,
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var token = _ref.token,
+    prefixCls = _ref.prefixCls,
     css = _ref.css,
     cx = _ref.cx;
+  var rowNum = _ref2.rowNum,
+    hasLink = _ref2.hasLink;
   var prefix = "".concat(prefixCls, "-features");
+  var coverCls = "".concat(prefix, "-cover");
+  var descCls = "".concat(prefix, "-description");
+  var titleCls = "".concat(prefix, "-title");
+  var imgCls = "".concat(prefix, "-img");
+  var scaleUnit = 20;
+  var genSize = function genSize(size) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: ", "px;\n      height: ", "px;\n      font-size: ", "px;\n    "])), size, size, size * (22 / 24));
+  };
+  var withTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      transition: all ", " ", ";\n    "])), token.motionDurationSlow, token.motionEaseInOutCirc);
   return {
-    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          display: grid;\n          grid-auto-flow: row dense;\n          grid-auto-rows: 18px;\n          grid-template-columns: repeat(3, 1fr);\n          gap: 16px;\n\n          max-width: ", "px;\n\n          ", "\n        "])), contentMaxWidth, responsive({
-      laptop: {
-        gridTemplateColumns: 'repeat(2, 1fr)'
-      },
-      mobile: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              display: flex;\n              flex-direction: column;\n            "])))
-    })))
+    cell: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: hidden;\n      "]))),
+    container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        ", ";\n        position: relative;\n        z-index: 1;\n\n        padding: 24px;\n        height: 228px;\n        max-height: 228px;\n\n        overflow: hidden;\n\n        p {\n          font-size: 16px;\n          line-height: 1.2;\n          text-align: left;\n          word-break: break-word;\n        }\n\n        &:hover {\n          .", " {\n            width: 100%;\n            height: ", "px;\n            padding: 0;\n            background: ", ";\n          }\n\n          .", " {\n            ", ";\n          }\n\n          .", " {\n            position: absolute;\n            visibility: hidden;\n            opacity: 0;\n          }\n\n          .", " {\n            font-size: ", "px;\n          }\n        }\n      "])), withTransition, coverCls, scaleUnit * rowNum, token.colorFillContent, imgCls, genSize(100), descCls, titleCls, hasLink ? 14 : 20),
+    desc: cx(descCls, withTransition, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          pointer-events: none;\n          color: ", ";\n\n          quotient {\n            position: relative;\n\n            display: block;\n\n            margin: 12px 0;\n            padding-left: 12px;\n\n            color: ", ";\n          }\n        "])), token.colorTextSecondary, token.colorTextDescription)),
+    img: cx(imgCls, withTransition, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          ", ";\n          color: ", ";\n        "])), genSize(20), token.colorText)),
+    imgContainer: cx(coverCls, withTransition, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          ", ";\n          padding: 4px;\n          opacity: 0.8;\n          border-radius: ", "px;\n        "])), genSize(24), token.borderRadius)),
+    link: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", ";\n        margin-top: 24px;\n      "])), withTransition),
+    title: cx(titleCls, withTransition, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          pointer-events: none;\n\n          margin: 16px 0;\n\n          font-size: 20px;\n          line-height: ", ";\n          color: ", ";\n        "])), token.lineHeightHeading3, token.colorText))
   };
 });

package/es/GradientButton/index.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { type ButtonProps } from 'antd';
-export type GradientButtonProps = ButtonProps;
-declare const GradientButton: import("react").NamedExoticComponent<ButtonProps>;
+export interface GradientButtonProps extends ButtonProps {
+    glow?: boolean;
+}
+declare const GradientButton: import("react").NamedExoticComponent<GradientButtonProps>;
 export default GradientButton;

package/es/GradientButton/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["glow", "children", "className", "size"];
 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 { Button } from 'antd';
@@ -9,19 +9,22 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var GradientButton = /*#__PURE__*/memo(function (_ref) {
-  var children = _ref.children,
+  var _ref$glow = _ref.glow,
+    glow = _ref$glow === void 0 ? true : _ref$glow,
+    children = _ref.children,
     className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'large' : _ref$size,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(size),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs(Button, _objectSpread(_objectSpread({
-    className: cx(styles.button, className)
+    className: cx(styles.button, className),
+    size: size
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [glow && /*#__PURE__*/_jsx("div", {
       className: styles.glow
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles.bg
     }), children]
   }));
 });

package/es/GradientButton/style.d.ts

@@ -1,5 +1,4 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    bg: import("antd-style").SerializedStyles;
+export declare const useStyles: (props?: import("antd/es/button").ButtonSize) => import("antd-style").ReturnStyles<{
     button: import("antd-style").SerializedStyles;
     glow: import("antd-style").SerializedStyles;
 }>;

package/es/GradientButton/style.js

@@ -1,14 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, size) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode,
     stylish = _ref.stylish;
+  var radius;
+  switch (size) {
+    case 'large':
+      {
+        radius = token.borderRadiusLG;
+        break;
+      }
+    case 'middle':
+      {
+        radius = token.borderRadius;
+        break;
+      }
+    case 'small':
+      {
+        radius = token.borderRadiusSM;
+        break;
+      }
+    default:
+      {
+        radius = token.borderRadius;
+        break;
+      }
+  }
+  console.log(token.borderRadius);
   return {
-    bg: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border-radius: inherit;\n    "])), token.colorBgLayout),
-    button: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      z-index: 1;\n      background: ", ";\n      border: none;\n\n      &::before {\n        ", "\n        content: '';\n\n        position: absolute;\n        z-index: 0;\n        inset: 0;\n\n        overflow: hidden;\n\n        padding: 1px;\n\n        mask:\n          linear-gradient(#fff 0 0) content-box,\n          linear-gradient(#fff 0 0);\n\n        mask-composite: xor;\n      }\n\n      > span {\n        position: relative;\n        z-index: 10;\n      }\n\n      &:hover {\n        &::before {\n          mask: unset;\n        }\n      }\n    "])), token.colorBgLayout, stylish.gradientAnimation),
-    glow: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: ", ";\n      filter: blur(", "em);\n      border-radius: inherit;\n    "])), stylish.gradientAnimation, isDarkMode ? 0.5 : 0.3, isDarkMode ? 1.5 : 1)
+    button: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        z-index: 1;\n        ", "\n        border: none;\n        border-radius: ", "px !important;\n\n        &::before {\n          content: '';\n\n          position: absolute;\n          z-index: -1;\n          top: 1px;\n          left: 1px;\n\n          width: calc(100% - 2px);\n          height: calc(100% - 2px);\n\n          background: ", ";\n          border-radius: ", "px;\n        }\n      "])), stylish.gradientAnimation, radius, token.colorBgLayout, radius - 1),
+    glow: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        position: absolute;\n        z-index: -2;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: ", ";\n        filter: blur(", "em);\n        border-radius: inherit;\n      "])), stylish.gradientAnimation, isDarkMode ? 0.5 : 0.3, isDarkMode ? 1.5 : 1)
   };
 });

package/es/GridBackground/index.js

@@ -33,11 +33,12 @@ var GridBackground = /*#__PURE__*/memo(function (_ref) {
       reverse: reverse
     }),
     styles = _useStyles.styles,
-    cx = _useStyles.cx;
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
   var gridProps = useMemo(function () {
     return {
       className: styles.highlight,
-      color: colorFront,
+      color: colorFront || theme.colorText,
       strokeWidth: strokeWidth
     };
   }, [reverse, colorFront, strokeWidth]);
@@ -68,7 +69,7 @@ var GridBackground = /*#__PURE__*/memo(function (_ref) {
     }, style) : style
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(Grid, {
-      color: colorBack,
+      color: colorBack || theme.colorBorder,
       strokeWidth: strokeWidth,
       style: {
         zIndex: 2

package/es/Hero/index.js

@@ -4,6 +4,7 @@ import { useResponsive } from 'antd-style';
 import * as LucideIcon from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
+import GridBackground from "../GridBackground";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -57,23 +58,34 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
       }
     },
     children: /*#__PURE__*/_jsxs(Flexbox, {
-      className: styles.container,
-      distribution: 'center',
-      horizontal: true,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.canvas
-      }), /*#__PURE__*/_jsxs(Center, {
-        children: [title && /*#__PURE__*/_jsx("h1", {
-          className: styles.title,
-          dangerouslySetInnerHTML: {
-            __html: title
-          }
-        }), description && /*#__PURE__*/_jsx("p", {
-          className: styles.desc,
-          dangerouslySetInnerHTML: {
-            __html: description
-          }
-        }), /*#__PURE__*/_jsx(ButtonGroups, {})]
+      align: 'center',
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        className: styles.container,
+        distribution: 'center',
+        horizontal: true,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.canvas
+        }), /*#__PURE__*/_jsxs(Center, {
+          children: [title && /*#__PURE__*/_jsx("h1", {
+            className: styles.title,
+            dangerouslySetInnerHTML: {
+              __html: title
+            }
+          }), description && /*#__PURE__*/_jsx("p", {
+            className: styles.desc,
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
+          }), /*#__PURE__*/_jsx(ButtonGroups, {})]
+        })]
+      }), /*#__PURE__*/_jsx(GridBackground, {
+        animation: true,
+        random: true,
+        strokeWidth: 4,
+        style: {
+          maxWidth: 960,
+          width: '120%'
+        }
       })]
     })
   });

package/es/SearchBar/index.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["spotlight", "className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
-var _navigator;
 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 { Search } from 'lucide-react';
@@ -14,8 +13,6 @@ 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 isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator === 'undefined' ? '' : (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform);
-var symbol = isAppleDevice ? '⌘' : 'Ctrl';
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var spotlight = _ref.spotlight,
     className = _ref.className,
@@ -26,20 +23,29 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     _ref$shortKey = _ref.shortKey,
     shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
     properties = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(true),
+  var _useState = useState('Ctrl'),
     _useState2 = _slicedToArray(_useState, 2),
-    showTag = _useState2[0],
-    setShowTag = _useState2[1];
-  var _useState3 = useState(value),
+    symbol = _useState2[0],
+    setSymbol = _useState2[1];
+  var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
+    showTag = _useState4[0],
+    setShowTag = _useState4[1];
+  var _useState5 = useState(value),
+    _useState6 = _slicedToArray(_useState5, 2),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var inputReference = useRef();
   useEffect(function () {
+    var _navigator;
     if (!enableShortKey) return;
+    var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator === 'undefined' ? '' : (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform);
+    if (isAppleDevice) {
+      setSymbol('⌘');
+    }
     var handler = function handler(event_) {
       if ((isAppleDevice ? event_.metaKey : event_.ctrlKey) && event_.key === shortKey) {
         var _inputReference$curre;

package/es/SpotlightCard/SpotlightCardItem.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+declare const SpotlightCardItem: import("react").NamedExoticComponent<DivProps>;
+export default SpotlightCardItem;

package/es/SpotlightCard/SpotlightCardItem.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SpotlightCardItem = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(className, styles.itemContainer)
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.content,
+      children: children
+    })
+  }));
+});
+export default SpotlightCardItem;

package/es/SpotlightCard/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DivProps } from "../types";
+export interface SpotlightCardProps<T = any> extends DivProps {
+    columns?: string;
+    gap?: number;
+    items: T[];
+    renderItem: (item: T) => ReactNode;
+}
+declare const SpotlightCard: import("react").NamedExoticComponent<SpotlightCardProps<any>>;
+export default SpotlightCard;

package/es/SpotlightCard/index.js

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "renderItem", "className", "columns", "gap", "style"];
+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; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { memo, useEffect, useRef } from 'react';
+import SpotlightCardItem from "./SpotlightCardItem";
+import { CHILDREN_CLASSNAME, useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
+  var items = _ref.items,
+    renderItem = _ref.renderItem,
+    className = _ref.className,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? '1fr 1fr 1fr' : _ref$columns,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 12 : _ref$gap,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var ref = useRef(null);
+  useEffect(function () {
+    if (!ref.current) return;
+    var fn = function fn(e) {
+      var _iterator = _createForOfIteratorHelper(document.querySelectorAll(".".concat(CHILDREN_CLASSNAME))),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var card = _step.value;
+          var rect = card.getBoundingClientRect(),
+            x = e.clientX - rect.left,
+            y = e.clientY - rect.top;
+          card.style.setProperty('--mouse-x', "".concat(x, "px"));
+          card.style.setProperty('--mouse-y', "".concat(y, "px"));
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+    ref.current.addEventListener('mousemove', fn);
+    return function () {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.removeEventListener('mousemove', fn);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, styles.grid, className),
+    ref: ref,
+    style: _objectSpread({
+      gap: gap,
+      gridTemplateColumns: columns
+    }, style)
+  }, props), {}, {
+    children: items.map(function (item, index) {
+      var children = renderItem(item);
+      return /*#__PURE__*/_jsx(SpotlightCardItem, {
+        className: CHILDREN_CLASSNAME,
+        children: children
+      }, index);
+    })
+  }));
+});
+export default SpotlightCard;

package/es/SpotlightCard/style.d.ts

@@ -0,0 +1,7 @@
+export declare const CHILDREN_CLASSNAME = "hover-card";
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    grid: import("antd-style").SerializedStyles;
+    itemContainer: import("antd-style").SerializedStyles;
+}>;

package/es/SpotlightCard/style.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+var BORDER_RADIUS = 12;
+export var CHILDREN_CLASSNAME = 'hover-card';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    responsive = _ref.responsive,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover > .", "::after {\n      opacity: 1;\n    }\n  "])), CHILDREN_CLASSNAME),
+    content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    z-index: 2;\n\n    flex-grow: 1;\n\n    height: 100%;\n    margin: 1px;\n\n    background: ", ";\n    border-radius: ", "px;\n  "])), token.colorBgContainer, BORDER_RADIUS - 1),
+    grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: grid;\n\n    ", " {\n      display: flex;\n      flex-direction: column;\n    }\n  "])), responsive.mobile),
+    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n\n    background: ", ";\n    border-radius: ", "px;\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n      border-radius: inherit;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        800px circle at var(--mouse-x) var(--mouse-y),\n        ", ",\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        600px circle at var(--mouse-x) var(--mouse-y),\n        ", ",\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  "])), rgba(token.colorBorder, 0.5), BORDER_RADIUS, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
+  };
+});

package/es/index.d.ts

@@ -57,6 +57,7 @@ export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
+export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
 export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';

package/es/index.js

@@ -56,6 +56,7 @@ export { default as SideNav } from "./SideNav";
 export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
 export { default as Spotlight } from "./Spotlight";
+export { default as SpotlightCard } from "./SpotlightCard";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
 export * from "./styles";
 export { default as Swatches } from "./Swatches";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.87.1",
+  "version": "1.88.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -132,7 +132,7 @@
     "dumi": "^2",
     "dumi-theme-lobehub": "latest",
     "eslint": "^8",
-    "father": "^4",
+    "father": "4.3.1",
     "husky": "^8",
     "jsdom": "^22",
     "lint-staged": "^14",

package/es/Features/Item.style.d.ts

@@ -1,12 +0,0 @@
-export declare const useStyles: (props?: {
-    hasLink?: boolean | undefined;
-    rowNum: number;
-} | undefined) => import("antd-style").ReturnStyles<{
-    cell: import("antd-style").SerializedStyles;
-    container: import("antd-style").SerializedStyles;
-    desc: string;
-    img: string;
-    imgContainer: string;
-    link: import("antd-style").SerializedStyles;
-    title: string;
-}>;

package/es/Features/Item.style.js

@@ -1,30 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, _ref2) {
-  var token = _ref.token,
-    prefixCls = _ref.prefixCls,
-    css = _ref.css,
-    cx = _ref.cx;
-  var rowNum = _ref2.rowNum,
-    hasLink = _ref2.hasLink;
-  var prefix = "".concat(prefixCls, "-features");
-  var coverCls = "".concat(prefix, "-cover");
-  var descCls = "".concat(prefix, "-description");
-  var titleCls = "".concat(prefix, "-title");
-  var imgCls = "".concat(prefix, "-img");
-  var scaleUnit = 20;
-  var genSize = function genSize(size) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      width: ", "px;\n      height: ", "px;\n      font-size: ", "px;\n    "])), size, size, size * (22 / 24));
-  };
-  var withTransition = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      transition: all ", " ", ";\n    "])), token.motionDurationSlow, token.motionEaseInOutCirc);
-  return {
-    cell: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: hidden;\n      "]))),
-    container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        ", ";\n        position: relative;\n        z-index: 1;\n\n        padding: 24px;\n\n        background: ", ";\n        border-radius: ", "px;\n\n        p {\n          font-size: 16px;\n          line-height: 1.2;\n          text-align: justify;\n          word-wrap: break-word;\n        }\n\n        &:hover {\n          .", " {\n            width: 100%;\n            height: ", "px;\n            padding: 0;\n            background: ", ";\n          }\n\n          .", " {\n            ", ";\n          }\n\n          .", " {\n            position: absolute;\n            visibility: hidden;\n            opacity: 0;\n          }\n\n          .", " {\n            font-size: ", "px;\n          }\n        }\n      "])), withTransition, token.colorBgContainer, token.borderRadiusLG, coverCls, scaleUnit * rowNum, token.colorFillContent, imgCls, genSize(100), descCls, titleCls, hasLink ? 14 : 20),
-    desc: cx(descCls, withTransition, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          pointer-events: none;\n          color: ", ";\n\n          quotient {\n            position: relative;\n\n            display: block;\n\n            margin: 12px 0;\n            padding-left: 12px;\n\n            color: ", ";\n          }\n        "])), token.colorTextSecondary, token.colorTextDescription)),
-    img: cx(imgCls, withTransition, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          ", ";\n          color: ", ";\n        "])), genSize(20), token.colorText)),
-    imgContainer: cx(coverCls, withTransition, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          ", ";\n          padding: 4px;\n          opacity: 0.8;\n          border-radius: ", "px;\n        "])), genSize(24), token.borderRadius)),
-    link: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", ";\n        margin-top: 24px;\n      "])), withTransition),
-    title: cx(titleCls, withTransition, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          pointer-events: none;\n\n          margin: 16px 0;\n\n          font-size: 20px;\n          line-height: ", ";\n          color: ", ";\n        "])), token.lineHeightHeading3, token.colorText))
-  };
-});