@lobehub/ui 1.72.8 → 1.74.0

package/es/BackBottom/index.d.ts

@@ -0,0 +1,13 @@
+import type { Target } from 'ahooks/lib/useScroll';
+import { type BackTopProps } from 'antd';
+import { type CSSProperties } from 'react';
+export interface BackBottomProps {
+    className?: string;
+    onClick?: BackTopProps['onClick'];
+    style?: CSSProperties;
+    target: Target;
+    text?: string;
+    visibilityHeight?: BackTopProps['visibilityHeight'];
+}
+declare const BackBottom: import("react").NamedExoticComponent<BackBottomProps>;
+export default BackBottom;

package/es/BackBottom/index.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { useScroll } from 'ahooks';
+import { Button } from 'antd';
+import { ListEnd } from 'lucide-react';
+import { memo, useEffect, useRef, useState } from 'react';
+import Icon from "../Icon";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var BackBottom = /*#__PURE__*/memo(function (_ref) {
+  var _ref$visibilityHeight = _ref.visibilityHeight,
+    visibilityHeight = _ref$visibilityHeight === void 0 ? 240 : _ref$visibilityHeight,
+    target = _ref.target,
+    onClick = _ref.onClick,
+    style = _ref.style,
+    className = _ref.className,
+    text = _ref.text;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useStyles = useStyles(visible),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var ref = useRef(null);
+  var current = target === null || target === void 0 ? void 0 : target.current;
+  var scrollHeight = (current === null || current === void 0 ? void 0 : current.scrollHeight) || 0;
+  var clientHeight = (current === null || current === void 0 ? void 0 : current.clientHeight) || 0;
+  var scroll = useScroll(target);
+  useEffect(function () {
+    if (scroll !== null && scroll !== void 0 && scroll.top) {
+      setVisible((scroll === null || scroll === void 0 ? void 0 : scroll.top) + clientHeight + visibilityHeight < scrollHeight);
+    }
+  }, [scrollHeight, scroll, visibilityHeight]);
+  var scrollToBottom = function scrollToBottom(e) {
+    var _current;
+    target === null || target === void 0 ? void 0 : (_current = target.current) === null || _current === void 0 ? void 0 : _current.scrollTo({
+      behavior: 'smooth',
+      left: 0,
+      top: scrollHeight
+    });
+    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+  };
+  return /*#__PURE__*/_jsx(Button, {
+    className: cx(styles, className),
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: ListEnd
+    }),
+    onClick: scrollToBottom,
+    ref: ref,
+    size: 'small',
+    style: _objectSpread({
+      bottom: 16,
+      position: 'absolute',
+      right: 16
+    }, style),
+    children: text || 'Back to bottom'
+  });
+});
+export default BackBottom;

package/es/BackBottom/style.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: boolean | undefined) => import("antd-style").ReturnStyles<string>;

package/es/BackBottom/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, visible) {
+  var token = _ref.token,
+    css = _ref.css,
+    stylish = _ref.stylish,
+    cx = _ref.cx;
+  return cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      pointer-events: ", ";\n\n      transform: translateY(", ");\n\n      padding-inline: 12px !important;\n\n      opacity: ", ";\n      background: ", ";\n      border-radius: 16px !important;\n    "])), visible ? 'all' : 'none', visible ? 0 : '16px', visible ? 1 : 0, token.colorFillSecondary));
+});

package/es/ChatHeader/ChatHeaderTitle.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface ChatHeaderTitleProps {
+    desc?: string | ReactNode;
+    tag?: ReactNode;
+    title: string | ReactNode;
+}
+declare const ChatHeaderTitle: import("react").NamedExoticComponent<ChatHeaderTitleProps>;
+export default ChatHeaderTitle;

package/es/ChatHeader/ChatHeaderTitle.js

@@ -0,0 +1,65 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    flex: 1;\n    max-width: 100%;\n  "]))),
+    desc: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    color: ", ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "])), token.colorTextTertiary),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: none;\n  "]))),
+    title: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    titleContainer: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    flex: 1;\n  "]))),
+    titleWithDesc: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    overflow: hidden;\n    font-weight: bold;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "])))
+  };
+});
+var ChatHeaderTitle = /*#__PURE__*/memo(function (_ref2) {
+  var title = _ref2.title,
+    desc = _ref2.desc,
+    tag = _ref2.tag;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  if (desc) return /*#__PURE__*/_jsxs(Flexbox, {
+    className: styles.container,
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.titleContainer,
+      gap: 8,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.titleWithDesc,
+        children: title
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        className: styles.tag,
+        horizontal: true,
+        children: tag
+      })]
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      horizontal: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.desc,
+        children: desc
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: styles.container,
+    gap: 8,
+    horizontal: true,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.title,
+      children: title
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.tag,
+      horizontal: true,
+      children: tag
+    })]
+  });
+});
+export default ChatHeaderTitle;

package/es/ChatItem/style.js

@@ -22,7 +22,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
     avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
     editingContainer: cx(css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        min-width: 800px !important;\n      "]))),
     loading: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),

package/es/Form/components/FormTitle.js

@@ -1,6 +1,6 @@
-import { Tag } from 'antd';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import Tag from "../../Tag";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/es/Icon/icons/DiscordIcon.d.ts

@@ -0,0 +1,3 @@
+import { type LucideIcon } from 'lucide-react';
+declare const _default: LucideIcon;
+export default _default;

package/es/Icon/icons/DiscordIcon.js

@@ -0,0 +1,17 @@
+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 { createLucideIcon } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Discord = createLucideIcon('Discord', [['path', {
+  d: 'M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z',
+  key: '18tl5t'
+}]]);
+var DiscordIcon = function DiscordIcon(props) {
+  return /*#__PURE__*/_jsx(Discord, _objectSpread({
+    style: {
+      overflow: 'visible'
+    }
+  }, props));
+};
+export default DiscordIcon;

package/es/Icon/icons/index.d.ts

@@ -0,0 +1 @@
+export { default as DiscordIcon } from './DiscordIcon';

package/es/Icon/icons/index.js

@@ -0,0 +1 @@
+export { default as DiscordIcon } from "./DiscordIcon";

package/es/Markdown/index.js

@@ -22,7 +22,14 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     a: Typography.Link,
     code: Code,
     details: Collapse,
-    hr: Divider,
+    hr: function hr() {
+      return /*#__PURE__*/_jsx(Divider, {
+        style: {
+          marginBottom: '1em',
+          marginTop: 0
+        }
+      });
+    },
     pre: CodeBlock
   };
   return /*#__PURE__*/_jsx(Typography, {

package/es/SliderWithInput/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { type InputNumberProps } from 'antd';
+import { SliderSingleProps } from 'antd/es/slider';
+export interface SliderWithInputProps extends SliderSingleProps {
+    controls?: InputNumberProps['controls'];
+    size?: InputNumberProps['size'];
+}
+declare const SliderWithInput: import("react").NamedExoticComponent<SliderWithInputProps>;
+export default SliderWithInput;

package/es/SliderWithInput/index.js

@@ -0,0 +1,69 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["step", "value", "onChange", "max", "min", "defaultValue", "size", "controls", "style", "className", "disabled"];
+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 { InputNumber, Slider } from 'antd';
+import { isNull } from 'lodash-es';
+import { memo, useCallback } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SliderWithInput = /*#__PURE__*/memo(function (_ref) {
+  var step = _ref.step,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    max = _ref.max,
+    min = _ref.min,
+    defaultValue = _ref.defaultValue,
+    size = _ref.size,
+    controls = _ref.controls,
+    style = _ref.style,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleOnchange = useCallback(function (value) {
+    if (Number.isNaN(value) || isNull(value)) return;
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+  }, []);
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    className: className,
+    direction: 'horizontal',
+    gap: 8,
+    style: style,
+    children: [/*#__PURE__*/_jsx(Slider, _objectSpread({
+      defaultValue: defaultValue,
+      disabled: disabled,
+      max: max,
+      min: min,
+      onChange: handleOnchange,
+      step: step,
+      style: size === 'small' ? {
+        flex: 1,
+        margin: 0
+      } : {
+        flex: 1
+      },
+      tooltip: {
+        open: false
+      },
+      value: typeof value === 'number' ? value : 0
+    }, props)), /*#__PURE__*/_jsx(InputNumber, {
+      controls: size !== 'small' || controls,
+      defaultValue: defaultValue,
+      disabled: disabled,
+      max: max,
+      min: min,
+      onChange: handleOnchange,
+      size: size,
+      step: Number.isNaN(step) || isNull(step) ? undefined : step,
+      style: {
+        flex: 1,
+        maxWidth: size === 'small' ? 40 : 64
+      },
+      value: typeof value === 'number' ? value : 0
+    })]
+  });
+});
+export default SliderWithInput;

package/es/Tag/index.d.ts

@@ -0,0 +1,7 @@
+import { type TagProps as AntTagProps } from 'antd';
+import { ReactNode } from 'react';
+export interface TagProps extends AntTagProps {
+    icon?: ReactNode;
+}
+declare const Tag: import("react").NamedExoticComponent<TagProps>;
+export default Tag;

package/es/Tag/index.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["icon", "children"];
+var _templateObject, _templateObject2;
+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 { Tag as AntTag } from 'antd';
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token;
+  return {
+    count: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n\n    height: 20px;\n    padding: 0 8px;\n\n    font-size: 12px;\n    line-height: 1;\n\n    background: ", ";\n    border: ", "px;\n  "])), token.colorFillTertiary, token.borderRadius),
+    tag: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", " !important;\n    background: ", ";\n    border: ", "px;\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorTextSecondary, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFill))
+  };
+});
+var Tag = /*#__PURE__*/memo(function (_ref2) {
+  var icon = _ref2.icon,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx(AntTag, _objectSpread(_objectSpread({
+    bordered: false,
+    className: styles.tag
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      gap: 4,
+      horizontal: true,
+      children: [icon, children]
+    })
+  }));
+});
+export default Tag;

package/es/index.d.ts

@@ -1,8 +1,10 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as BackBottom, type BackBottomProps } from './BackBottom';
 export { default as Burger, type BurgerProps } from './Burger';
 export { default as ChatHeader, type ChatHeaderProps } from './ChatHeader';
+export { default as ChatHeaderTitle, type ChatHeaderTitleProps, } from './ChatHeader/ChatHeaderTitle';
 export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export type { ChatListProps, OnActionClick, OnMessageChange, RenderErrorMessage, RenderMessage, } from './ChatList';
@@ -37,6 +39,7 @@ 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';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export * from './Icon/icons';
 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';
@@ -47,12 +50,14 @@ export { default as MessageInput, type MessageInputProps } from './MessageInput'
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
+export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
+export { default as Tag, type TagProps } from './Tag';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Toc, type TocProps } from './Toc';

package/es/index.js

@@ -1,8 +1,10 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
+export { default as BackBottom } from "./BackBottom";
 export { default as Burger } from "./Burger";
 export { default as ChatHeader } from "./ChatHeader";
+export { default as ChatHeaderTitle } from "./ChatHeader/ChatHeaderTitle";
 export { default as ChatInputArea } from "./ChatInputArea";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";
@@ -36,6 +38,7 @@ export { default as Header } from "./Header";
 export { default as Hero } from "./Hero";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
+export * from "./Icon/icons";
 export { Input, TextArea } from "./Input";
 export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
 export { default as List } from "./List";
@@ -46,12 +49,14 @@ export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";
 export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
+export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
 export { default as Spotlight } from "./Spotlight";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
 export * from "./styles";
 export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
+export { default as Tag } from "./Tag";
 export { default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
 export { default as Toc } from "./Toc";

package/es/styles/algorithms/generateCustomStylish.js

@@ -1,17 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { keyframes } from 'antd-style';
+import { readableColor } from 'polished';
 export var generateCustomStylish = function generateCustomStylish(_ref) {
   var css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
+  var cyan = isDarkMode ? token.cyan9A : token.cyan10A;
   var gradient = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  "])));
   return {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
     blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(36px);\n    "]))),
     bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
     gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      > *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n\n        > code {\n          padding: 0 !important;\n          border: none !important;\n        }\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      > ol > li {\n        margin-left: 0;\n      }\n\n      ol {\n        counter-reset: steps;\n        margin-left: 0;\n        list-style: none;\n\n        li {\n          counter-increment: steps;\n\n          &::before {\n            content: counter(steps);\n\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n\n            width: 1.1rem;\n            height: 1.1rem;\n            margin-right: 0.5em;\n\n            font-size: 0.8em;\n            font-weight: 500;\n            line-height: 1;\n            color: ", ";\n\n            background: ", ";\n            border-radius: 50%;\n          }\n        }\n\n        ol li::before {\n          color: ", ";\n          background: ", ";\n        }\n      }\n\n      > ul {\n        > li {\n          line-height: 1.8;\n          list-style-type: disc;\n\n          &::marker {\n            color: ", ";\n          }\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, readableColor(cyan), cyan, token.colorTextSecondary, token.colorFill, cyan, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
     noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.72.8",
+  "version": "1.74.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",