@lobehub/ui 1.28.0 → 1.29.0

package/README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-<img width="160" src="https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp">
+<img width="160" src="https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp">
 
 <h1>Lobe UI</h1>
 

package/es/ActionIconGroup/index.d.ts

@@ -3,8 +3,19 @@ import { ActionIconProps } from "..";
 import { type MenuProps } from 'antd';
 import { DivProps } from "../types";
 export interface ActionIconGroupProps extends DivProps {
+    /**
+     * @description The direction of the icons
+     * @default "row"
+     */
     direction?: 'row' | 'column';
+    /**
+     * @description The menu items for the dropdown
+     */
     dropdownMenu?: MenuProps['items'];
+    /**
+     * @description The items to be rendered
+     * @default []
+     */
     items?: ActionIconProps[];
     /**
      * @description The position of the tooltip relative to the target
@@ -12,13 +23,13 @@ export interface ActionIconGroupProps extends DivProps {
      */
     placement?: ActionIconProps['placement'];
     /**
-     * @description Whether add spotlight background
+     * @description Whether to add a spotlight background
      * @default true
      */
     spotlight?: boolean;
     /**
      * @description The type of the group
-     * @default 'block'
+     * @default "block"
      */
     type?: 'ghost' | 'block' | 'pure';
 }

package/es/Avatar/index.js

@@ -5,6 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { Avatar as AntAvatar } from 'antd';
 import { memo } from 'react';
+import FluentEmoji from "../FluentEmoji";
+import { getEmoji } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Avatar = /*#__PURE__*/memo(function (_ref) {
@@ -20,15 +22,15 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
     return avatar.startsWith(index);
   }));
-  var isEmoji = Boolean(avatar && !isImage && /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g.test(avatar));
+  var emoji = avatar && !isImage && getEmoji(avatar);
   var _useStyles = useStyles({
       background: background,
-      isEmoji: isEmoji,
+      isEmoji: Boolean(emoji),
       size: size
     }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var text = isImage ? title : avatar;
+  var text = String(isImage ? title : avatar);
   return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,
@@ -39,7 +41,10 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape: shape,
     size: size
   }, props), {}, {
-    children: isEmoji ? text : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
+    children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: size
+    }) : text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
   }));
 });
 export default Avatar;

package/es/Burger/index.d.ts

@@ -2,11 +2,30 @@
 import { MenuProps } from 'antd';
 import { DivProps } from "../types";
 export interface BurgerProps extends DivProps {
+    /**
+     * @description The height of the header component
+     * @default 64
+     */
     headerHeight?: number;
+    /**
+     * @description The items to be displayed in the menu
+     */
     items: MenuProps['items'];
+    /**
+     * @description The keys of the currently open sub-menus
+     */
     openKeys?: MenuProps['openKeys'];
+    /**
+     * @description Whether the menu is currently open or not
+     */
     opened: boolean;
+    /**
+     * @description The keys of the currently selected menu items
+     */
     selectedKeys?: MenuProps['selectedKeys'];
+    /**
+     * @description A callback function to set the opened state
+     */
     setOpened: (state: boolean) => void;
 }
 declare const Burger: import("react").NamedExoticComponent<BurgerProps>;

package/es/Burger/style.js

@@ -11,6 +11,6 @@ export var useStyles = createStyles(function (_ref, headerHeight) {
     drawer: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.ant-drawer-content {\n        background: transparent;\n      }\n\n      .ant-drawer-body {\n        display: flex;\n        flex-direction: column;\n      }\n    "]))),
     drawerRoot: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      top: ", "px;\n\n      :focus-visible {\n        outline: none;\n      }\n\n      .ant-drawer {\n        &-mask {\n          ", ";\n          background-color: ", ";\n        }\n\n        &-content-wrapper {\n          box-shadow: none;\n        }\n      }\n    "])), headerHeight + 1, stylish.blur, rgba(token.colorBgLayout, 0.5)),
     fillRect: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n      width: 100%;\n      border-top: none;\n    "]))),
-    menu: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-inline-end: transparent !important;\n\n      > .ant-menu-item-only-child,\n      .ant-menu-submenu-title {\n        width: 100%;\n        margin: 0 !important;\n        border-top: none;\n        border-radius: 0;\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n\n      .ant-menu-item-only-child:first-child {\n        border-top: none;\n      }\n\n      .ant-menu-submenu-title[aria-expanded='true'] {\n        a {\n          font-weight: 600;\n          color: ", " !important;\n        }\n      }\n\n      .ant-menu-item-group-title {\n        padding-top: 4px;\n        padding-bottom: 4px;\n\n        font-size: 12px;\n        font-weight: 500;\n        text-overflow: ellipsis;\n        text-transform: uppercase;\n        white-space: nowrap;\n\n        background: ", ";\n      }\n\n      .ant-menu-item {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        border-radius: ", "px;\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n\n      .ant-menu-item-active {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        background: ", ";\n        border-radius: ", "px;\n      }\n\n      .ant-menu-item-selected {\n        font-weight: 600;\n        color: ", ";\n        background: ", ";\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n    "])), token.colorText, token.colorFill, token.colorText, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFillSecondary, token.colorFillSecondary, token.borderRadius, token.colorBgLayout, token.colorText, token.colorBgLayout, token.colorText)
+    menu: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: transparent;\n      border-inline-end: transparent !important;\n\n      > .ant-menu-item-only-child,\n      .ant-menu-submenu-title {\n        width: 100%;\n        margin: 0 !important;\n        border-top: none;\n        border-radius: 0;\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n\n      .ant-menu-item-only-child:first-child {\n        border-top: none;\n      }\n\n      .ant-menu-submenu-title[aria-expanded='true'] {\n        a {\n          font-weight: 600;\n          color: ", " !important;\n        }\n      }\n\n      .ant-menu-item-group-title {\n        padding-top: 8px;\n        padding-bottom: 8px;\n\n        font-size: 12px;\n        font-weight: 500;\n        line-height: 1;\n        text-overflow: ellipsis;\n        text-transform: uppercase;\n        white-space: nowrap;\n\n        background: ", ";\n      }\n\n      .ant-menu-item {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        border-radius: ", "px;\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n\n      .ant-menu-item-active {\n        width: calc(100% - 16px) !important;\n        margin: 8px !important;\n        background: ", ";\n        border-radius: ", "px;\n      }\n\n      .ant-menu-item-selected {\n        font-weight: 600;\n        color: ", ";\n        background: ", ";\n\n        &:hover,\n        &:active {\n          color: ", " !important;\n          background: ", " !important;\n        }\n      }\n    "])), token.colorText, token.colorFill, token.colorText, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFillSecondary, token.colorFillSecondary, token.borderRadius, token.colorBgLayout, token.colorText, token.colorBgLayout, token.colorText)
   };
 });

package/es/ChatInputArea/index.d.ts

@@ -1,16 +1,57 @@
 import { ReactNode } from 'react';
 import type { DivProps } from "../types";
 export interface ChatInputAreaProps extends DivProps {
+    /**
+     * @description Actions to be displayed in the left of actions bar
+     */
     actions?: ReactNode;
+    /**
+     * @description Default value of the input
+     */
     defaultValue?: string;
+    /**
+     * @description Whether the input is disabled or not
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description Whether the input is expanded or not
+     * @default false
+     */
     expand?: boolean;
+    /**
+     * @description Footer to be displayed below input area
+     */
     footer?: ReactNode;
+    /**
+     * @description Whether the input is in loading state or not
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * @description Minimum height of the input area
+     * @default 200
+     */
     minHeight?: number;
+    /**
+     * @description Callback function when the expand state changes
+     * @param expand - Whether the input is expanded or not
+     */
     onExpandChange?: (expand: boolean) => void;
+    /**
+     * @description Callback function when the input value changes
+     * @param value - The current value of the input
+     */
     onInputChange?: (value: string) => void;
+    /**
+     * @description Callback function when the send button is clicked
+     * @param value - The current value of the input
+     */
     onSend?: (value: string) => void;
+    /**
+     * @description Placeholder text of the input
+     * @default 'Type something to chat...'
+     */
     placeholder?: string;
 }
 declare const ChatInputArea: import("react").NamedExoticComponent<ChatInputAreaProps>;

package/es/ColorScales/index.d.ts

@@ -1,8 +1,17 @@
 /// <reference types="react" />
 import { ColorScaleItem } from "../styles/colors";
 export interface ColorScalesProps {
+    /**
+     * @description Index of the mid highlight color in the scale
+     */
     midHighLight: number;
+    /**
+     * @description Name of the color scale
+     */
     name: string;
+    /**
+     * @description Color scale item object
+     */
     scale: ColorScaleItem;
 }
 declare const ColorScales: import("react").NamedExoticComponent<ColorScalesProps>;

package/es/Features/Item.d.ts

@@ -1,17 +1,51 @@
-import { ImageContainerType } from 'dumi-theme-lobehub/src';
 import { CSSProperties } from 'react';
 import type { DivProps } from "../types";
 export interface FeatureItem {
+    /**
+     * @description The number of columns the item spans.
+     */
     column?: number;
+    /**
+     * @description The description of the feature item.
+     */
     description?: string;
+    /**
+     * @description Whether this item is a hero item.
+     */
     hero?: boolean;
+    /**
+     * @description The name of the icon to display on the feature item.
+     */
     icon?: string;
+    /**
+     * @description The URL of the image to display on the feature item.
+     */
     image?: string;
+    /**
+     * @description The CSS style of the image to display on the feature item.
+     */
     imageStyle?: CSSProperties;
-    imageType?: ImageContainerType;
+    /**
+     * @description The type of the image to display on the feature item.
+     * @default 'normal'
+     */
+    imageType?: 'light' | 'primary' | 'soon';
+    /**
+     * @description The link to navigate to when clicking on the feature item.
+     */
     link?: string;
+    /**
+     * @description Whether to open the link in a new tab when clicking on the feature item.
+     * @default false
+     */
     openExternal?: boolean;
+    /**
+     * @description The number of rows the item spans.
+     */
     row?: number;
+    /**
+     * @description The title of the feature item.
+     */
     title: string;
 }
 export interface FeatureItemProps extends FeatureItem, DivProps {

package/es/Features/index.d.ts

@@ -3,9 +3,22 @@ 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;
+    /**
+     * @description The class name of the item
+     */
     itemClassName?: string;
+    /**
+     * @description The style of the item
+     */
     itemStyle?: CSSProperties;
+    /**
+     * @description The array of feature items
+     */
     items: FeatureItem[];
 }
 declare const Features: import("react").NamedExoticComponent<FeaturesProps>;

package/es/FluentEmoji/index.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface FluentEmojiProps extends DivProps {
+    /**
+     * @description The emoji character to be rendered
+     */
+    emoji: string;
+    /**
+     * @description Size of the emoji
+     * @default 40
+     */
+    size?: number;
+    /**
+     * @description The type of the FluentUI emoji set to be used
+     * @default 'modern'
+     */
+    type?: 'modern' | 'flat' | 'high-contrast';
+}
+declare const FluentEmoji: import("react").NamedExoticComponent<FluentEmojiProps>;
+export default FluentEmoji;

package/es/FluentEmoji/index.js

@@ -0,0 +1,84 @@
+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 = ["emoji", "className", "style", "type", "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 { kebabCase } from 'lodash-es';
+import { Loader2 } from 'lucide-react';
+import { memo, useEffect, useMemo, useState } from 'react';
+import Icon from "../Icon";
+import { getEmojiNameByCharacter } from "../utils/getEmojiByCharacter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
+  var emoji = _ref.emoji,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'modern' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 40 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    loading = _useState2[0],
+    setLoading = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loadingFail = _useState4[0],
+    setLoadingFail = _useState4[1];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  useEffect(function () {
+    setLoading(true);
+  }, [emoji]);
+  var emojiName = useMemo(function () {
+    return getEmojiNameByCharacter(emoji);
+  }, [emoji]);
+  if (!emojiName || loadingFail) return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: _objectSpread({
+      fontSize: size,
+      height: size,
+      width: size
+    }, style)
+  }, props), {}, {
+    children: emoji
+  }));
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: _objectSpread({
+      height: size,
+      width: size
+    }, style)
+  }, props), {}, {
+    children: [loading && /*#__PURE__*/_jsx("div", {
+      className: styles.loading,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        size: {
+          fontSize: size * 0.75
+        },
+        spin: true
+      })
+    }), /*#__PURE__*/_jsx("img", {
+      alt: emojiName,
+      height: "100%",
+      onError: function onError() {
+        return setLoadingFail(true);
+      },
+      onLoad: function onLoad() {
+        return setLoading(false);
+      },
+      src: "https://npm.elemecdn.com/fluentui-emoji/icons/".concat(type, "/").concat(kebabCase(emojiName), ".svg"),
+      style: {
+        opacity: loading ? 0 : 1
+      },
+      width: "100%"
+    })]
+  }));
+});
+export default FluentEmoji;

package/es/FluentEmoji/style.d.ts

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

package/es/FluentEmoji/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      line-height: 1;\n      text-align: center;\n    "]))),
+    loading: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 100%;\n      height: 100%;\n\n      color: ", ";\n    "])), token.colorText)
+  };
+});

package/es/FontLoader/index.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 export interface FontLoaderProps {
+    /**
+     * @description The URL of the font to load
+     */
     url: string;
 }
 declare const FontLoader: import("react").NamedExoticComponent<FontLoaderProps>;

package/es/Footer/index.d.ts

@@ -1,10 +1,24 @@
-/// <reference types="react" />
-import { FooterProps as RcProps } from 'rc-footer';
+import { type FooterProps as RcProps } from 'rc-footer';
+import { type ReactNode } from 'react';
 export interface FooterProps {
-    bottom?: RcProps['bottom'];
+    /**
+     * @description The bottom content of the footer
+     */
+    bottom?: ReactNode;
+    /**
+     * @description The columns of the footer
+     */
     columns: RcProps['columns'];
+    /**
+     * @description The maximum width of the content in the footer
+     * @type number
+     * @default 960
+     */
     contentMaxWidth?: number;
-    theme?: RcProps['theme'];
+    /**
+     * @description The theme of the footer
+     */
+    theme?: 'light' | 'dark';
 }
 declare const Footer: import("react").NamedExoticComponent<FooterProps>;
 export default Footer;

package/es/GradientButton/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { ButtonProps } from 'antd';
 export interface GradientButtonProps extends ButtonProps {
+    /**
+     * @description Whether the button should spin or not
+     * @default false
+     */
     spin?: boolean;
 }
 declare const GradientButton: import("react").NamedExoticComponent<GradientButtonProps>;

package/es/Header/index.d.ts

@@ -1,14 +1,41 @@
 import { CSSProperties, ReactNode } from 'react';
 import { DivProps } from "../types";
 export interface HeaderProps extends DivProps {
+    /**
+     * @description Actions to be displayed on the right side of the header
+     */
     actions?: ReactNode;
+    /**
+     * @description Class name for actions container
+     */
     actionsClassName?: string;
+    /**
+     * @description Style for actions container
+     */
     actionsStyle?: CSSProperties;
+    /**
+     * @description Logo to be displayed on the left side of the header
+     */
     logo?: ReactNode;
+    /**
+     * @description Class name for logo container
+     */
     logoClassName?: string;
+    /**
+     * @description Style for logo container
+     */
     logoStyle?: CSSProperties;
+    /**
+     * @description Navigation to be displayed on the right side of the logo
+     */
     nav?: ReactNode;
+    /**
+     * @description Class name for navigation container
+     */
     navClassName?: string;
+    /**
+     * @description Style for navigation container
+     */
     navStyle?: CSSProperties;
 }
 declare const Header: import("react").NamedExoticComponent<HeaderProps>;

package/es/Hero/index.d.ts

@@ -1,14 +1,41 @@
 /// <reference types="react" />
 export interface HeroAction {
+    /**
+     * @description Icon name from LucideIcon package
+     */
     icon?: string;
+    /**
+     * @description Link to be redirected to on button click
+     */
     link: string;
+    /**
+     * @description Whether to open the link in a new tab
+     * @default false
+     */
     openExternal?: boolean;
+    /**
+     * @description Text to be displayed on the button
+     */
     text: string;
+    /**
+     * @description Type of button
+     * @default 'default'
+     */
     type?: 'primary' | 'default';
 }
 export interface HeroProps {
+    /**
+     * @description Array of action buttons to be displayed
+     * @default []
+     */
     actions?: HeroAction[];
+    /**
+     * @description Short description to be displayed
+     */
     description?: string;
+    /**
+     * @description Title to be displayed
+     */
     title?: string;
 }
 declare const Hero: import("react").NamedExoticComponent<HeroProps>;

package/es/Input/index.d.ts

@@ -1,14 +1,33 @@
-/// <reference types="react" />
-import { InputProps as AntdInputProps } from 'antd';
+import { type InputProps as AntdInputProps, type InputRef } from 'antd';
 import { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea';
+import { type Ref } from 'react';
 export interface InputProps extends AntdInputProps {
-    ref?: any;
+    /**
+     * @description Ref of the component
+     */
+    ref?: Ref<InputRef>;
+    /**
+     * @description Type of the input
+     * @default 'ghost'
+     */
     type?: 'ghost' | 'block' | 'pure';
 }
 export declare const Input: import("react").NamedExoticComponent<InputProps>;
 export interface TextAreaProps extends AntdTextAreaProps {
-    ref?: any;
+    /**
+     * @description Ref of the component
+     * @default undefined
+     */
+    ref?: Ref<InputRef>;
+    /**
+     * @description Whether to enable resizing of the textarea
+     * @default true
+     */
     resize?: boolean;
+    /**
+     * @description Type of the textarea
+     * @default 'ghost'
+     */
     type?: 'ghost' | 'block' | 'pure';
 }
 export declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;

package/es/Layout/index.d.ts

@@ -21,15 +21,46 @@ export declare const LayoutToc: import("react").NamedExoticComponent<LayoutTocPr
 export declare type LayoutFooterProps = DivProps;
 export declare const LayoutFooter: import("react").NamedExoticComponent<DivProps>;
 export interface LayoutProps {
+    /**
+     * @description Width of the sidebar
+     */
     asideWidth?: number;
+    /**
+     * @description Children of the layout
+     */
     children?: ReactNode;
+    /**
+     * @description Content of the layout
+     */
     content?: ReactNode;
+    /**
+     * @description Footer of the layout
+     */
     footer?: ReactNode;
+    /**
+     * @description Header of the layout
+     */
     header?: ReactNode;
+    /**
+     * @description Height of the header
+     * @default 64
+     */
     headerHeight?: number;
+    /**
+     * @description Helmet of the layout
+     */
     helmet?: ReactNode;
+    /**
+     * @description Sidebar of the layout
+     */
     sidebar?: ReactNode;
+    /**
+     * @description Table of contents of the layout
+     */
     toc?: ReactNode;
+    /**
+     * @description Width of the table of contents
+     */
     tocWidth?: number;
 }
 declare const Layout: import("react").NamedExoticComponent<LayoutProps>;

package/es/Logo/index.js

@@ -6,10 +6,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import Divider from "./Divider";
-import LogoFlat from "./LogoFlat";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
-import { useStyles } from "./style";
+import { LOGO_3D, LOGO_FLAT, 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";
@@ -32,7 +31,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       {
         return /*#__PURE__*/_jsx("img", _objectSpread({
           alt: "lobehub",
-          src: "https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp",
+          src: LOGO_3D,
           style: _objectSpread({
             height: size,
             width: size
@@ -41,12 +40,14 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       }
     case 'flat':
       {
-        return /*#__PURE__*/_jsx(LogoFlat, _objectSpread({
+        return /*#__PURE__*/_jsx("img", {
+          alt: "lobehub",
+          src: LOGO_FLAT,
           style: _objectSpread({
             height: size,
             width: size
           }, style)
-        }, props));
+        });
       }
     case 'high-contrast':
       {
@@ -71,11 +72,11 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
         logoComponent = /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("img", {
             alt: "lobehub",
-            src: "https://npm.elemecdn.com/@lobehub/assets/logo/logo-3d.webp",
-            style: _objectSpread({
+            src: LOGO_3D,
+            style: {
               height: size,
               width: size
-            }, style)
+            }
           }), /*#__PURE__*/_jsx(LogoText, {
             style: {
               height: size,

package/es/Logo/style.d.ts

@@ -1,3 +1,5 @@
+export declare const LOGO_3D = "https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp";
+export declare const LOGO_FLAT = "https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-flat.svg";
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     extraTitle: import("antd-style").SerializedStyles;
     flexCenter: import("antd-style").SerializedStyles;

package/es/Logo/style.js

@@ -1,6 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
+export var LOGO_3D = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-3d.webp';
+export var LOGO_FLAT = 'https://npm.elemecdn.com/@lobehub/assets-logo/assets/logo-flat.svg';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {

package/es/MessageInput/index.d.ts

@@ -1,36 +1,36 @@
 /// <reference types="react" />
 import { ButtonProps } from 'antd';
 import { type TextAreaProps } from "../Input";
-/**
- * @title MessageInputProps
- * @category Props
- * @description MessageInput 组件的 Props
- */
 export interface MessageInputProps {
+    /**
+     * @description Additional className to apply to the component.
+     */
     className?: string;
     /**
-     * @title 默认值
-     * @description 输入框的默认值
+     * @description The default value of the input box.
      */
     defaultValue?: string;
+    /**
+     * @description The height of the input box.
+     */
     height?: number;
     /**
-     * @title 取消回调函数
-     * @description 用户点击取消按钮后的回调函数
+     * @description Callback function triggered when user clicks on the cancel button.
      */
     onCancel?: () => void;
     /**
-     * @title 确认回调函数
-     * @description 用户点击确认按钮后的回调函数
-     * @param text - 用户输入的文本
+     * @description Callback function triggered when user clicks on the confirm button.
+     * @param text - The text input by the user.
      */
     onConfirm?: (text: string) => void;
     /**
-     * @title 渲染按钮
-     * @description 自定义渲染底部按钮
-     * @param text - 用户输入的文本
+     * @description Custom rendering of the bottom buttons.
+     * @param text - The text input by the user.
      */
     renderButtons?: (text: string) => ButtonProps[];
+    /**
+     * @description The type of the input box.
+     */
     type?: TextAreaProps['type'];
 }
 declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;

package/es/MessageInput/index.js

@@ -7,12 +7,6 @@ import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { TextArea } from "../Input";
-
-/**
- * @title MessageInputProps
- * @category Props
- * @description MessageInput 组件的 Props
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/ThemeProvider/GlobalStyle.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { createGlobalStyle } from 'antd-style';
-var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (_ref) {
+var GlobalStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n  html,body {\n    --font-settings: \"cv01\", \"tnum\", \"kern\";\n    --font-variations: \"opsz\" auto, tabular-nums;\n\n    overflow-x: hidden;\n    overflow-y: auto;\n\n    margin: 0;\n    padding: 0;\n\n    font-family: ", ";\n    font-size: ", "px;\n    font-feature-settings: var(--font-settings);\n    font-variation-settings: var(--font-variations);\n    line-height: 1;\n    color: ", ";\n    text-size-adjust: none;\n    text-rendering: optimizelegibility;\n    vertical-align: baseline;\n\n    color-scheme: dark;\n    background-color: ", ";\n\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-overflow-scrolling:touch;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  body {\n    overflow-x: hidden;\n    height: 100vh;\n  }\n\n  #root {\n    min-height: 100vh;\n  }\n\n  code {\n    font-family: ", " !important;\n\n    span {\n      font-family: ", " !important;\n    }\n  }\n\n  p {\n    text-align: justify;\n    word-wrap: break-word;\n  }\n\n  ::selection {\n    color: #000;\n    background: ", ";\n\n\t  -webkit-text-fill-color: unset !important;\n  }\n\n  * {\n\t  box-sizing: border-box;\n\t  vertical-align: baseline;\n  }\n\n  @media only screen and (min-width: 574px) {\n    * {\n      ::-webkit-scrollbar {\n        cursor: pointer;\n        width: 4px;\n        height: 4px;\n        background-color: transparent;\n      }\n\n      ::-webkit-scrollbar-thumb {\n        cursor: pointer;\n        background-color: transparent;\n        border-radius: 2px;\n        transition: background-color 500ms ", ";\n\n        &:hover {\n          background-color: ", ";\n        }\n      }\n\n      ::-webkit-scrollbar-corner {\n        display: none;\n        width: 0;\n        height: 0;\n      }\n\n      &:hover {\n        ::-webkit-scrollbar-thumb {\n          background-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily;
 }, function (_ref2) {

package/es/ThemeProvider/index.d.ts

@@ -30,6 +30,10 @@ export interface ThemeProviderProps {
      * @description The mode of the theme (light or dark)
      */
     themeMode?: ThemeMode;
+    /**
+     * @description Webfont loader css strings
+     */
+    webfonts?: string[];
 }
 declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
 export default ThemeProvider;

package/es/ThemeProvider/index.js

@@ -10,6 +10,7 @@ import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     themeMode = _ref.themeMode,
@@ -20,35 +21,37 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     _ref$customToken = _ref.customToken,
     _customToken = _ref$customToken === void 0 ? function () {
       return {};
-    } : _ref$customToken;
+    } : _ref$customToken,
+    _ref$webfonts = _ref.webfonts,
+    webfonts = _ref$webfonts === void 0 ? ['https://npm.elemecdn.com/@lobehub/webfont-mono/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans/css/index.css', 'https://npm.elemecdn.com/@lobehub/webfont-harmony-sans-sc/css/index.css'] : _ref$webfonts;
   setupStyled({
     ThemeContext: ThemeContext
   });
-  return /*#__PURE__*/_jsx(StyleProvider, {
-    speedy: process.env.NODE_ENV === 'production',
-    children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
-      customStylish: function customStylish(theme) {
-        return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), _customStylish(theme));
-      },
-      customToken: function customToken(theme) {
-        return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), _customToken(theme));
-      },
-      theme: lobeTheme,
-      themeMode: themeMode,
-      children: [/*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/hack-nerd-font-mono.css"
-      }), /*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/harmonyos-sans.css"
-      }), /*#__PURE__*/_jsx(FontLoader, {
-        url: "https://npm.elemecdn.com/@lobehub/assets@1.2.0/webfonts/css/harmonyos-sans-sc.css"
-      }), /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
-        style: {
-          minHeight: 'inherit',
-          width: 'inherit'
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [webfonts && webfonts.map(function (webfont, index) {
+      return /*#__PURE__*/_jsx(FontLoader, {
+        url: webfont
+      }, index);
+    }), /*#__PURE__*/_jsx(StyleProvider, {
+      speedy: process.env.NODE_ENV === 'production',
+      children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
+        customStylish: function customStylish(theme) {
+          return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), _customStylish(theme));
         },
-        children: children
-      })]
-    })
+        customToken: function customToken(theme) {
+          return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), _customToken(theme));
+        },
+        theme: lobeTheme,
+        themeMode: themeMode,
+        children: [/*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
+          style: {
+            minHeight: 'inherit',
+            width: 'inherit'
+          },
+          children: children
+        })]
+      })
+    })]
   });
 });
 export default ThemeProvider;

package/es/Toc/TocMobile.d.ts

@@ -1,16 +1,46 @@
 /// <reference types="react" />
 import { AnchorProps } from 'antd';
 export interface AnchorItem {
+    /**
+     * @description The children of the anchor item
+     */
     children?: AnchorItem[];
+    /**
+     * @description The ID of the anchor item
+     */
     id: string;
+    /**
+     * @description The title of the anchor item
+     */
     title: string;
 }
 export interface TocMobileProps {
+    /**
+     * @description The active key of the TocMobile component
+     * @default undefined
+     */
     activeKey?: string;
+    /**
+     * @description The function to get the container of the anchor
+     */
     getContainer?: AnchorProps['getContainer'];
+    /**
+     * @description The height of the header
+     * @default 64
+     */
     headerHeight?: number;
+    /**
+     * @description The array of anchor items to be displayed
+     */
     items: AnchorItem[];
+    /**
+     * @description The function to be called when the active key changes
+     */
     onChange?: (activeKey: string) => void;
+    /**
+     * @description The width of the toc
+     * @default 176
+     */
     tocWidth?: number;
 }
 export declare const mapItems: (items: AnchorItem[]) => {

package/es/Toc/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { type TocMobileProps } from './TocMobile';
 export interface TocProps extends TocMobileProps {
+    /**
+     * @description Whether the component is being rendered on a mobile device or not
+     * @default false
+     */
     isMobile?: boolean;
 }
 declare const Toc: import("react").NamedExoticComponent<TocProps>;

package/es/TokenTag/index.d.ts

@@ -1,7 +1,13 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
 export interface TokenTagProps extends DivProps {
+    /**
+     * @description Maximum value for the token
+     */
     maxValue: number;
+    /**
+     * @description Current value of the token
+     */
     value: number;
 }
 declare const TokenTag: import("react").NamedExoticComponent<TokenTagProps>;

package/es/TokenTag/index.js

@@ -4,7 +4,8 @@ var _excluded = ["className", "maxValue", "value"];
 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 { useStyles } from "./style";
+import FluentEmoji from "../FluentEmoji";
+import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TokenTag = /*#__PURE__*/memo(function (_ref) {
@@ -32,9 +33,9 @@ var TokenTag = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className)
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx("span", {
-      className: styles.emoji,
-      children: emoji
+    children: [/*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: ICON_SIZE
     }), valueLeft > 0 ? "Tokens ".concat(valueLeft) : "Overload"]
   }));
 });

package/es/TokenTag/style.d.ts

@@ -1,4 +1,4 @@
+export declare const ICON_SIZE = 20;
 export declare const useStyles: (props?: "normal" | "low" | "overload" | undefined) => import("antd-style").ReturnStyles<{
     container: string;
-    emoji: import("antd-style").SerializedStyles;
 }>;

package/es/TokenTag/style.js

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 var HEIGHT = 28;
-var ICON_SIZE = 20;
+export var ICON_SIZE = 20;
 export var useStyles = createStyles(function (_ref, type) {
   var cx = _ref.cx,
     css = _ref.css,
@@ -26,7 +26,6 @@ export var useStyles = createStyles(function (_ref, type) {
       }
   }
   return {
-    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, HEIGHT - ICON_SIZE, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2)),
-    emoji: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n    "])), ICON_SIZE)
+    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        font-family: ", ";\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.fontFamilyCode, token.colorFillSecondary, HEIGHT / 2))
   };
 });

package/es/components/ControlInput.d.ts

@@ -1,9 +1,21 @@
 /// <reference types="react" />
 import { InputProps } from "../Input";
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+    /**
+     * @description Callback function that is triggered when the input value changes
+     */
     onChange?: (value: string) => void;
+    /**
+     * @description Callback function that is triggered when the input value has stopped changing
+     */
     onChangeEnd?: (value: string) => void;
+    /**
+     * @description Callback function that is triggered when the input value is changing
+     */
     onValueChanging?: (value: string) => void;
+    /**
+     * @description The initial value of the input
+     */
     value?: string;
 }
 export declare const ControlInput: import("react").NamedExoticComponent<ControlInputProps>;

package/es/hooks/useHighlight.d.ts

@@ -5,20 +5,20 @@ export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "
  */
 interface Store {
     /**
-     * @title 将代码转化为 HTML 字符串
-     * @param text - 代码文本
-     * @param language - 代码语言
-     * @param isDarkMode - 是否为暗黑模式
-     * @returns HTML 字符串
+     * @title Convert code to HTML string
+     * @param text - The code text
+     * @param language - The language of the code
+     * @param isDarkMode - Whether it's in dark mode or not
+     * @returns HTML string
      */
     codeToHtml: (text: string, language: string, isDarkMode: boolean) => string;
     /**
-     * @title 高亮器对象
+     * @title Highlighter object
      */
     highlighter?: Highlighter;
     /**
-     * @title 初始化高亮器对象
-     * @returns 初始化 Promise 对象
+     * @title Initialize the highlighter object
+     * @returns Initialization promise object
      */
     initHighlighter: () => Promise<void>;
 }

package/es/index.d.ts

@@ -15,6 +15,7 @@ export { default as EditableMessage, type EditableMessageProps } from './Editabl
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
+export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';
 export { default as GradientButton, type GradientButtonProps } from './GradientButton';

package/es/index.js

@@ -14,6 +14,7 @@ export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Features } from "./Features";
+export { default as FluentEmoji } from "./FluentEmoji";
 export { default as FontLoader } from "./FontLoader";
 export { default as Footer } from "./Footer";
 export { default as GradientButton } from "./GradientButton";

package/es/styles/theme/base.js

@@ -1,7 +1,7 @@
 var FONT_EMOJI = "\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Apple Color Emoji\",\"Twemoji Mozilla\",\"Noto Color Emoji\",\"Android Emoji\"";
 var FONT_EN = "\"HarmonyOS Sans\",\"Segoe UI\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,\"Open Sans\",\"Helvetica Neue\",sans-serif";
 var FONT_CN = "\"HarmonyOS Sans SC\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft Yahei UI\",\"Microsoft Yahei\",\"Source Han Sans CN\",sans-serif";
-var FONT_CODE = "\"Hack Nerd Font Mono\",ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
+var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
 export var baseToken = {
   borderRadius: 5,
   borderRadiusLG: 8,

package/es/utils/getEmojiByCharacter.d.ts

@@ -0,0 +1,2 @@
+export declare const getEmoji: (emoji: string) => string | undefined;
+export declare const getEmojiNameByCharacter: (emoji: string) => string | undefined;

package/es/utils/getEmojiByCharacter.js

@@ -0,0 +1,15 @@
+import emojiRegex from 'emoji-regex';
+import emojilib from 'emojilib';
+export var getEmoji = function getEmoji(emoji) {
+  var _emoji$match;
+  var regex = emojiRegex();
+  var pureEmoji = (_emoji$match = emoji.match(regex)) === null || _emoji$match === void 0 ? void 0 : _emoji$match[0];
+  return pureEmoji;
+};
+export var getEmojiNameByCharacter = function getEmojiNameByCharacter(emoji) {
+  var _EmojiLab$pureEmoji;
+  var pureEmoji = getEmoji(emoji);
+  if (!pureEmoji) return;
+  var EmojiLab = emojilib;
+  return EmojiLab === null || EmojiLab === void 0 ? void 0 : (_EmojiLab$pureEmoji = EmojiLab[pureEmoji]) === null || _EmojiLab$pureEmoji === void 0 ? void 0 : _EmojiLab$pureEmoji[0];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -81,6 +81,8 @@
     "chroma-js": "^2",
     "copy-to-clipboard": "^3",
     "dayjs": "^1",
+    "emoji-regex": "^10",
+    "emojilib": "^3",
     "fast-deep-equal": "^3",
     "immer": "^10",
     "leva": "^0",

package/es/Logo/LogoFlat.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const LogoFlat: import("react").MemoExoticComponent<any>;
-export default LogoFlat;

package/es/Logo/LogoFlat.js

@@ -1,105 +0,0 @@
-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 { memo } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var LogoFlat = /*#__PURE__*/memo(function (_ref) {
-  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
-    fill: "none",
-    viewBox: "0 0 320 320"
-  }, props), {}, {
-    children: [/*#__PURE__*/_jsx("path", {
-      d: "M294 172.516c0 75.655-59.442 128.5-134 128.5-74.558 0-134-53.845-134-129.5 0-22.501 5-32.142 31.5-35.672 47.5-6.329 72.542-3.828 102.5-3.828 29.959 0 72.556-1.271 102.5 3.828 24.5 4.171 30 8.671 31.5 36.672z",
-      fill: "#FFB02E"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M159.75 242.516c-28.25 0-35.75 3.5-35.75 3.5s3.5 27 35.75 27 35.75-27 35.75-27-7.5-3.5-35.75-3.5z",
-      fill: "#972021"
-    }), /*#__PURE__*/_jsx("ellipse", {
-      cx: "160.5",
-      cy: "148.516",
-      fill: "#FF6723",
-      rx: "111.5",
-      ry: "11.5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M135.5 160.015c.633-14.972-.483-22.788-5.5-36.443 0 0 9.5-12.056 27-12.056s30 3.064 30 3.064c-3.028 16.793-3.182 26.921-2.5 45.435h-49z",
-      fill: "#FEE064"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M119.189 234.289c14.742-7.076 24.811-21.51 24.811-39.273 0-25.405-20.595-48-46-48s-47 19.595-47 45c0 13.983 6.542 26.812 16.662 35.521 5.893-2.245 12.652-3.521 19.838-3.521 12.705 0 24.077 3.989 31.689 10.273zM200.811 234.289C186.069 227.213 176 212.779 176 195.016c0-25.405 20.595-48 46-48s47 19.595 47 45c0 13.983-6.542 26.812-16.662 35.521-5.893-2.245-12.652-3.521-19.838-3.521-12.705 0-24.077 3.989-31.689 10.273z",
-      fill: "#fff"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "28",
-      cy: "28",
-      fill: "#270C36",
-      r: "28",
-      transform: "matrix(-1 0 0 1 247 165.016)"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "101",
-      cy: "193.016",
-      fill: "#270C36",
-      r: "28"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#F70A8D"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#F70A8D"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#20D45F",
-      fillOpacity: ".42"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M173 19.016c-14.027 0-19.5-11.5-41-11-23.394 0-34 13-45.5 23-1.958 1.702-11.5 7-16 9-19.683 8.748-34.5 21.5-34.5 40.5 0 20.711 17.46 37.5 39 37.5 3.536 0 6.963-.453 10.22-1.301 8.7 10.539 22.179 16.658 37.28 17.301 23.5 1 31-15.25 44.5-8.5 9.259 4.629 13.83 8.5 28.5 8.5 17.108 0 25.057-5.233 30-11 9-10.5 22.879-4 31.5-4 18.778 0 34-14.551 34-32.5 0-17.95-15.222-32.5-34-32.5-5.15 0-14.856 1.27-17-7-3.5-13.5-20.148-29-44-29-9.318 0-17.691 1-23 1z",
-      fill: "#A68AE2"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M157.32 14.32c4.969 2.458 9.492 4.696 15.68 4.696 2.284 0 5.134-.185 8.383-.396 4.304-.28 9.307-.604 14.617-.604 23.852 0 40.5 15.5 44 29 1.908 7.36 9.804 7.164 15.149 7.032a77.169 77.169 0 011.851-.032c16.664 0 30.528 11.46 33.438 26.583.137.71-1.083.88-1.354.208-.027-.07-.056-.139-.084-.208-4.719-11.431-17.265-19.605-32-19.605-.544 0-1.173.013-1.866.027-5.853.12-16.216.334-18.134-6.413-3.5-12.315-17.148-26.455-41-26.455-5.31 0-10.313.296-14.617.55-3.249.193-6.099.362-8.383.362-6.188 0-10.711-2.042-15.68-4.285-6.295-2.84-13.305-6.005-25.32-5.75-20.261 0-30.93 8.896-40.895 17.205a244.788 244.788 0 01-4.605 3.777c-1.958 1.553-11.5 6.386-16 8.21-15.7 6.366-28.304 15.055-32.762 27.107-.247.668-1.437.525-1.327-.178l.021-.135c2.572-16.004 16.348-27.125 34.068-35 4.5-2 14.042-7.298 16-9 1.54-1.34 3.064-2.732 4.605-4.14 9.965-9.109 20.634-18.86 40.895-18.86 12.015-.28 19.025 3.189 25.32 6.303z",
-      fill: "#DBA6E9"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "73.5",
-      cy: "20.516",
-      fill: "#7B61FF",
-      r: "9.5"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "55",
-      cy: "108.016",
-      fill: "#D9D9D9",
-      r: "16"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "55",
-      cy: "108.016",
-      fill: "#F2314D",
-      r: "16"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "266.5",
-      cy: "49.516",
-      fill: "#7CEE1D",
-      r: "15.5"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M132.235 244.117c5.483-.823 14.191-1.601 27.515-1.601 12.211 0 20.546.654 26.073 1.396-1.542 5.86-12.963 8.104-26.823 8.104-13.698 0-25.013-2.191-26.765-7.899z",
-      fill: "#fff"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#F70A8D"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#F70A8D"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M160.006 290.016c20.099 0 23.305-20.488 23.927-25.61.478-4.146-1.675-6.244-4.02-7.659-2.345-1.414-9.379-2.731-19.907-2.731-10.527 0-17.514 1.317-19.906 2.731-2.393 1.415-4.546 3.513-4.02 7.659.622 5.122 3.828 25.61 23.926 25.61z",
-      fill: "#F24630"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M171.696 129.744c-5.721-3.89-13.954-4.248-19.786-.526-7.724 4.929-16.971 7.798-26.91 7.798-27.062 0-49-21.267-49-47.5 0-26.234 21.938-47.5 49-47.5 13.628 0 25.956 5.392 34.838 14.097 4.948 4.85 13.088 6.24 19.498 3.609a42.502 42.502 0 0116.164-3.166c22.92 0 41.5 18.012 41.5 40.23 0 22.218-18.58 40.23-41.5 40.23-8.856 0-17.065-2.69-23.804-7.272z",
-      fill: "#F4B8CA"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M237 96.786c0 .752-1.081.808-1.271.08-4.558-17.42-20.841-30.31-40.229-30.31a42.503 42.503 0 00-16.164 3.166c-6.41 2.63-14.55 1.24-19.498-3.61-8.882-8.704-21.21-14.096-34.838-14.096-23.544 0-43.21 16.096-47.925 37.556-.139.632-1.075.59-1.075-.056 0-26.234 21.938-47.5 49-47.5 13.628 0 25.956 5.392 34.838 14.097 4.948 4.85 13.088 6.24 19.498 3.609a42.503 42.503 0 0116.164-3.166c22.92 0 41.5 18.012 41.5 40.23z",
-      fill: "#FFD7D7"
-    }), /*#__PURE__*/_jsx("circle", {
-      cx: "205.5",
-      cy: "106.516",
-      fill: "#0C74FF",
-      r: "13.5"
-    })]
-  }));
-});
-export default LogoFlat;