@lobehub/ui 1.69.0 → 1.71.0

package/es/Features/Item.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { IconProps } from "../Icon";
 import type { DivProps } from "../types";
 export interface FeatureItem {
     /**
@@ -16,7 +17,7 @@ export interface FeatureItem {
     /**
      * @description The name of the icon to display on the feature item.
      */
-    icon?: string;
+    icon?: IconProps['icon'];
     /**
      * @description The URL of the image to display on the feature item.
      */

package/es/Features/Item.js

@@ -3,10 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["style", "className", "row", "column", "description", "image", "title", "link", "icon", "imageStyle", "openExternal"];
 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 { Icon } from "./..";
-import * as LucideIcon from 'lucide-react';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
+import Icon from "../Icon";
 import { useStyles } from "./Item.style";
 
 // @ts-ignore
@@ -15,13 +14,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var Image = /*#__PURE__*/memo(function (_ref) {
   var image = _ref.image,
     className = _ref.className,
-    title = _ref.title;
+    title = _ref.title,
+    style = _ref.style;
   return image.startsWith('http') ? /*#__PURE__*/_jsx("img", {
     alt: title,
     className: className,
-    src: image
+    src: image,
+    style: style
   }) : /*#__PURE__*/_jsx(Center, {
     className: className,
+    style: style,
     children: image
   });
 });
@@ -45,9 +47,6 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-
-  // @ts-ignore
-  var FeatureIcon = icon && LucideIcon[icon];
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
     style: _objectSpread({
@@ -57,12 +56,12 @@ var Item = /*#__PURE__*/memo(function (_ref2) {
   }, props), {}, {
     children: /*#__PURE__*/_jsxs("div", {
       className: styles.cell,
-      children: [image || FeatureIcon && /*#__PURE__*/_jsxs(Center, {
+      children: [image || icon && /*#__PURE__*/_jsxs(Center, {
         className: styles.imgContainer,
         style: imageStyle,
-        children: [FeatureIcon && /*#__PURE__*/_jsx(Icon, {
+        children: [icon && /*#__PURE__*/_jsx(Icon, {
           className: styles.img,
-          icon: FeatureIcon
+          icon: icon
         }), image && /*#__PURE__*/_jsx(Image, {
           className: styles.img,
           image: image,

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,50 @@
+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,
+      reverse: 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)
+  };
+});

package/es/LogoThree/Loading.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Loading: import("react").NamedExoticComponent<{
+    size?: number | undefined;
+}>;
+export default Loading;

package/es/LogoThree/Loading.js

@@ -0,0 +1,21 @@
+import { Html } from '@react-three/drei';
+import { Loader2 } from 'lucide-react';
+import { memo } from 'react';
+import { Center } from 'react-layout-kit';
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Loading = /*#__PURE__*/memo(function (_ref) {
+  var size = _ref.size;
+  return /*#__PURE__*/_jsx(Html, {
+    children: /*#__PURE__*/_jsx(Center, {
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        size: {
+          fontSize: size
+        },
+        spin: true
+      })
+    })
+  });
+});
+export default Loading;

package/es/LogoThree/Logo.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface LogoProps {
+    rotation?: [number, number, number];
+}
+declare const Logo: import("react").NamedExoticComponent<LogoProps>;
+export default Logo;

package/es/LogoThree/Logo.js

@@ -0,0 +1,27 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/esm/objectDestructuringEmpty";
+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 { useGLTF } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { memo, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var NUM = 10;
+var Logo = /*#__PURE__*/memo(function (_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var ref = useRef(null);
+  var _useGLTF = useGLTF('https://gw.alipayobjects.com/os/kitchen/ygwdCZyaMZ/lobehub.gltf'),
+    scene = _useGLTF.scene;
+  useFrame(function (state) {
+    var t = state.clock.getElapsedTime();
+    ref.current.rotation.set(Math.cos(t / 4) / NUM, Math.sin(t / 3) / NUM / 2, 0.15 + Math.sin(t / 2) / NUM);
+    ref.current.position.y = -0.2 + (0.8 + Math.cos(t / 2)) / 7;
+  });
+  return /*#__PURE__*/_jsx("group", {
+    ref: ref,
+    children: /*#__PURE__*/_jsx("primitive", _objectSpread({
+      object: scene
+    }, props))
+  });
+});
+export default Logo;

package/es/LogoThree/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export interface LogoThreeProps {
+    className?: string;
+    size?: number;
+    style?: CSSProperties;
+}
+declare const LogoThree: import("react").NamedExoticComponent<LogoThreeProps>;
+export default LogoThree;

package/es/LogoThree/index.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { Canvas } from '@react-three/fiber';
+import { Suspense, memo } from 'react';
+import Loading from "./Loading";
+import Logo from "./Logo";
+import { jsx as _jsx } from "react/jsx-runtime";
+var LogoThree = /*#__PURE__*/memo(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 320 : _ref$size,
+    style = _ref.style,
+    className = _ref.className;
+  return /*#__PURE__*/_jsx(Canvas, {
+    camera: {
+      fov: 16,
+      position: [10, 1, 0]
+    },
+    className: className,
+    style: size ? _objectSpread({
+      height: size,
+      maxHeight: size,
+      maxWidth: size,
+      width: size
+    }, style) : style,
+    children: /*#__PURE__*/_jsx(Suspense, {
+      fallback: /*#__PURE__*/_jsx(Loading, {
+        size: size / 2 > 48 ? 48 : size / 2
+      }),
+      children: /*#__PURE__*/_jsx(Logo, {
+        rotation: [0, 1.5, 0]
+      })
+    })
+  });
+});
+export default LogoThree;

package/es/TokenTag/index.d.ts

@@ -12,7 +12,6 @@ export interface TokenTagProps extends DivProps {
     text?: {
         overload?: string;
         remained?: string;
-        tokens?: string;
         used?: string;
     };
     /**

package/es/TokenTag/index.js

@@ -3,8 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "displayMode", "maxValue", "value", "text"];
 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 { useHover } from 'ahooks';
-import { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,8 +16,6 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value = _ref.value,
     text = _ref.text,
     props = _objectWithoutProperties(_ref, _excluded);
-  var reference = useRef(ref);
-  var isHovering = useHover(reference);
   var valueLeft = maxValue - value;
   var percent = valueLeft / maxValue;
   var type;
@@ -38,12 +35,12 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
-    ref: reference
+    ref: ref
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? [displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value, isHovering ? (text === null || text === void 0 ? void 0 : text.tokens) || 'Tokens' : ''].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+    }), valueLeft > 0 ? [displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/es/index.d.ts

@@ -31,6 +31,8 @@ export { default as FormItem, type FormItemProps } from './Form/components/FormI
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
 export { default as Giscus, type GiscusProps } from './Giscus';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';
+export { default as GridBackground, type GridBackgroundProps } from './GridBackground';
+export { default as GridShowcase, type GridShowcaseProps } from './GridBackground/GridShowcase';
 export { default as Header, type HeaderProps } from './Header';
 export { default as Hero, type HeroAction, type HeroProps } from './Hero';
 export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type SyntaxHighlighterProps, } from './Highlighter';
@@ -39,6 +41,7 @@ export { Input, type InputProps, TextArea, type TextAreaProps } from './Input';
 export { default as Layout, LayoutFooter, type LayoutFooterProps, LayoutHeader, type LayoutHeaderProps, LayoutMain, type LayoutMainProps, type LayoutProps, LayoutSidebar, LayoutSidebarInner, type LayoutSidebarInnerProps, type LayoutSidebarProps, LayoutToc, type LayoutTocProps, } from './Layout';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
+export { default as LogoThree, type LogoThreeProps } from './LogoThree';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';

package/es/index.js

@@ -30,6 +30,8 @@ export { default as FormItem } from "./Form/components/FormItem";
 export { default as FormTitle } from "./Form/components/FormTitle";
 export { default as Giscus } from "./Giscus";
 export { default as GradientButton } from "./GradientButton";
+export { default as GridBackground } from "./GridBackground";
+export { default as GridShowcase } from "./GridBackground/GridShowcase";
 export { default as Header } from "./Header";
 export { default as Hero } from "./Hero";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
@@ -38,6 +40,7 @@ export { Input, TextArea } from "./Input";
 export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
+export { default as LogoThree } from "./LogoThree";
 export { default as Markdown } from "./Markdown";
 export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.69.0",
+  "version": "1.71.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -76,6 +76,8 @@
     "@giscus/react": "^2",
     "@lobehub/emojilib": "latest",
     "@react-spring/web": "^9",
+    "@react-three/drei": "^9",
+    "@react-three/fiber": "^8",
     "ahooks": "^3",
     "antd": "^5",
     "chroma-js": "^2",
@@ -99,6 +101,7 @@
     "remark-gfm": "^3",
     "shiki-es": "^0",
     "styled-components": "^6",
+    "three": "^0.150",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",
@@ -113,6 +116,7 @@
     "@types/pangu": "^4",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/three": "^0.149",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
     "babel-plugin-antd-style": "latest",