@lobehub/ui 1.70.0 → 1.72.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/GridShowcase.js

@@ -39,6 +39,7 @@ var GridShowcase = /*#__PURE__*/memo(function (_ref) {
       colorBack: rgba(theme.colorText, 0.24),
       colorFront: theme.colorText,
       random: true,
+      reverse: true,
       showBackground: true,
       style: {
         zIndex: 0

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,66 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { a, config, useSpring } from '@react-spring/three';
+import { useGLTF } from '@react-three/drei';
+import { useFrame } from '@react-three/fiber';
+import { memo, useCallback, useEffect, useRef, useState } 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;
+  // Hover state
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hovered = _useState2[0],
+    setHover = _useState2[1];
+  useEffect(function () {
+    return void (document.body.style.cursor = hovered ? 'pointer' : 'auto');
+  }, [hovered]);
+  // Events
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toggle = _useState4[0],
+    set = _useState4[1];
+  var _useSpring = useSpring({
+      config: config.wobbly,
+      x: toggle
+    }, [toggle]),
+    _useSpring2 = _slicedToArray(_useSpring, 1),
+    x = _useSpring2[0].x;
+  var onPointerOver = useCallback(function () {
+    return setHover(true);
+  }, []);
+  var onPointerOut = useCallback(function () {
+    return setHover(false);
+  }, []);
+  var onClick = useCallback(function () {
+    return set(function (toggle) {
+      return Number(!toggle);
+    });
+  }, [set]);
+  var rotation = x.to([0, 1], [0, Math.PI * 2]);
+  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(a.group, {
+      onClick: onClick,
+      onPointerOut: onPointerOut,
+      onPointerOver: onPointerOver,
+      "rotation-y": rotation,
+      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

@@ -41,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

@@ -40,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.70.0",
+  "version": "1.72.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -75,7 +75,10 @@
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
     "@lobehub/emojilib": "latest",
+    "@react-spring/three": "^9",
     "@react-spring/web": "^9",
+    "@react-three/drei": "^9",
+    "@react-three/fiber": "^8",
     "ahooks": "^3",
     "antd": "^5",
     "chroma-js": "^2",
@@ -99,6 +102,7 @@
     "remark-gfm": "^3",
     "shiki-es": "^0",
     "styled-components": "^6",
+    "three": "^0.150",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",
@@ -113,6 +117,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",