@lobehub/ui 1.119.4 → 1.120.0

package/es/ActionIcon/index.d.ts

@@ -18,6 +18,7 @@ export interface ActionIconProps extends Omit<IconProps, 'size' | 'icon'> {
      * @default false
      */
     arrow?: boolean;
+    disable?: boolean;
     /**
      * @description Glass blur style
      * @default 'false'

package/es/ActionIcon/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay", "fillOpacity", "fillRule", "focusable"];
+var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay", "fillOpacity", "fillRule", "focusable", "disable"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Loader2 } from 'lucide-react';
@@ -35,6 +35,7 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     fillOpacity = _ref.fillOpacity,
     fillRule = _ref.fillRule,
     focusable = _ref.focusable,
+    disable = _ref.disable,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       active: Boolean(active),
@@ -65,8 +66,8 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     spin: true
   }));
   var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.block, className),
-    onClick: loading ? undefined : onClick,
+    className: cx(styles.block, disable ? styles.disabled : styles.normal, className),
+    onClick: loading || disable ? undefined : onClick,
     ref: ref,
     style: _objectSpread({
       borderRadius: borderRadius,

package/es/ActionIcon/style.d.ts

@@ -3,5 +3,7 @@ export declare const useStyles: (props?: {
     glass: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     block: string;
+    disabled: import("antd-style").SerializedStyles;
     icon: import("antd-style").SerializedStyles;
+    normal: import("antd-style").SerializedStyles;
 }>;

package/es/ActionIcon/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
@@ -9,7 +9,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)),
-    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        transition: scale 400ms ", ";\n\n        &:active {\n          scale: 0.8;\n        }\n      "])), token.motionEaseOut)
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut)),
+    disabled: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        cursor: not-allowed;\n        opacity: 0.5;\n      "]))),
+    icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        transition: scale 400ms ", ";\n\n        &:active {\n          scale: 0.8;\n        }\n      "])), token.motionEaseOut),
+    normal: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)
   };
 });

package/es/Image/ImageGallery.d.ts

@@ -0,0 +1,9 @@
+import { ImageProps } from 'antd';
+import { PropsWithChildren } from 'react';
+export interface ImageGalleryProps extends PropsWithChildren {
+    enable?: boolean;
+    items?: string[];
+    preview?: ImageProps['preview'];
+}
+declare const ImageGallery: import("react").NamedExoticComponent<ImageGalleryProps>;
+export default ImageGallery;

package/es/Image/ImageGallery.js

@@ -0,0 +1,21 @@
+import { Image } from 'antd';
+import { memo } from 'react';
+import usePreview from "./usePreview";
+import { jsx as _jsx } from "react/jsx-runtime";
+var PreviewGroup = Image.PreviewGroup;
+var ImageGallery = /*#__PURE__*/memo(function (_ref) {
+  var items = _ref.items,
+    children = _ref.children,
+    _ref$enable = _ref.enable,
+    enable = _ref$enable === void 0 ? true : _ref$enable,
+    _ref$preview = _ref.preview,
+    preview = _ref$preview === void 0 ? {} : _ref$preview;
+  var mergePreivew = usePreview(preview);
+  if (!enable) return children;
+  return /*#__PURE__*/_jsx(PreviewGroup, {
+    items: items,
+    preview: mergePreivew,
+    children: children
+  });
+});
+export default ImageGallery;

package/es/Image/Preview.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+interface PreviewProps extends PropsWithChildren {
+    visible?: boolean;
+}
+declare const Preview: import("react").NamedExoticComponent<PreviewProps>;
+export default Preview;

package/es/Image/Preview.js

@@ -0,0 +1,24 @@
+import { memo, useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Preview = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    visible = _ref.visible;
+  var ref = useRef();
+  useEffect(function () {
+    var handleDisableZoom = function handleDisableZoom(event) {
+      event.preventDefault();
+    };
+    if (visible) {
+      ref.current.addEventListener('wheel', handleDisableZoom, {
+        passive: false
+      });
+    } else {
+      ref.current.removeEventListener('wheel', handleDisableZoom);
+    }
+  }, [visible]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    children: children
+  });
+});
+export default Preview;

package/es/Image/index.d.ts

@@ -0,0 +1,10 @@
+import { type ImageProps as AntImageProps } from 'antd';
+import { ReactNode } from 'react';
+export interface ImageProps extends AntImageProps {
+    actions?: ReactNode;
+    isLoading?: boolean;
+    minSize?: number;
+    size?: number;
+}
+declare const Image: import("react").NamedExoticComponent<ImageProps>;
+export default Image;

package/es/Image/index.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["wrapperClassName", "style", "preview", "isLoading", "minSize", "size", "actions"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { Image as AntImage, Skeleton } from 'antd';
+import { Eye } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Icon from "../Icon";
+import usePreview from "./usePreview";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Image = /*#__PURE__*/memo(function (_ref) {
+  var wrapperClassName = _ref.wrapperClassName,
+    style = _ref.style,
+    _ref$preview = _ref.preview,
+    preview = _ref$preview === void 0 ? {} : _ref$preview,
+    isLoading = _ref.isLoading,
+    _ref$minSize = _ref.minSize,
+    minSize = _ref$minSize === void 0 ? 64 : _ref$minSize,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '100%' : _ref$size,
+    actions = _ref.actions,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      minSize: minSize,
+      size: size
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx,
+    theme = _useStyles.theme;
+  var mergePreivew = usePreview(preview);
+  if (isLoading) return /*#__PURE__*/_jsx(Skeleton.Avatar, {
+    active: true,
+    style: {
+      borderRadius: theme.borderRadius,
+      height: size,
+      minHeight: minSize,
+      minWidth: minSize,
+      width: size
+    }
+  });
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.imageWrapper, wrapperClassName),
+    style: style,
+    children: [actions && /*#__PURE__*/_jsx("div", {
+      className: styles.actions,
+      children: actions
+    }), /*#__PURE__*/_jsx(AntImage, _objectSpread({
+      fallback: styles.imageOff,
+      loading: 'lazy',
+      preview: _objectSpread({
+        mask: actions ? /*#__PURE__*/_jsx("div", {}) : /*#__PURE__*/_jsx(Icon, {
+          icon: Eye,
+          size: 'normal'
+        })
+      }, mergePreivew),
+      wrapperClassName: styles.image
+    }, rest))]
+  });
+});
+export default Image;

package/es/Image/style.d.ts

@@ -0,0 +1,10 @@
+export declare const useStyles: (props?: {
+    minSize?: string | number | undefined;
+    size?: string | number | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    actions: string;
+    image: import("antd-style").SerializedStyles;
+    imageOff: string;
+    imageWrapper: import("antd-style").SerializedStyles;
+    toolbar: string;
+}>;

package/es/Image/style.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    stylish = _ref.stylish,
+    isDarkMode = _ref.isDarkMode;
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    minSize = _ref2.minSize,
+    size = _ref2.size;
+  var SIZE = typeof size === 'number' ? "".concat(size, "px") : size;
+  var MIN_SIZE = typeof minSize === 'number' ? "".concat(minSize, "px") : minSize;
+  var actions = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: absolute;\n      z-index: 1;\n      top: 0;\n      right: 0;\n\n      opacity: 0;\n    "]))));
+  return {
+    actions: actions,
+    image: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: relative;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n\n        img {\n          width: ", " !important;\n          min-width: ", " !important;\n          height: ", " !important;\n          min-height: ", " !important;\n\n          object-fit: contain;\n        }\n      "])), SIZE, MIN_SIZE, SIZE, MIN_SIZE),
+    imageOff: isDarkMode ? 'https://gw.alipayobjects.com/zos/kitchen/BpCkC%26aex5/image_off_dark.webp' : 'https://gw.alipayobjects.com/zos/kitchen/AYB4XBJBSA/image_off_light.webp',
+    imageWrapper: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        width: ", ";\n        min-width: ", ";\n        height: ", ";\n        min-height: ", ";\n        margin-block: 0 1em;\n\n        background: ", ";\n        border-radius: ", "px;\n        box-shadow: 0 0 0 1px ", ";\n\n        &:hover {\n          .", " {\n            opacity: 1;\n          }\n        }\n      "])), SIZE, MIN_SIZE, SIZE, MIN_SIZE, rgba(token.colorBgLayout, 0.25), token.borderRadius, token.colorFillTertiary, actions),
+    toolbar: cx(stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 4px;\n          background: ", ";\n          border-radius: ", "px;\n        "])), rgba(token.colorBgMask, 0.1), token.borderRadiusLG))
+  };
+});

package/es/Image/usePreview.d.ts

@@ -0,0 +1,3 @@
+import { ImageProps } from 'antd';
+export declare const usePreview: ({ onVisibleChange, styles: previewStyle, ...rest }?: ImageProps['preview'] | any) => ImageProps['preview'];
+export default usePreview;

package/es/Image/usePreview.js

@@ -0,0 +1,95 @@
+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 = ["onVisibleChange", "styles"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, X, ZoomIn, ZoomOut } from 'lucide-react';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import Icon from "../Icon";
+import Preview from "./Preview";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var usePreview = function usePreview() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _onVisibleChange = _ref.onVisibleChange,
+    _ref$styles = _ref.styles,
+    previewStyle = _ref$styles === void 0 ? {} : _ref$styles,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return _objectSpread({
+    closeIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: X,
+      size: {
+        fontSize: 18,
+        strokeWidth: 3
+      }
+    }),
+    imageRender: function imageRender(node) {
+      return /*#__PURE__*/_jsx(Preview, {
+        visible: visible,
+        children: node
+      });
+    },
+    onVisibleChange: function onVisibleChange(e) {
+      setVisible(e);
+      _onVisibleChange === null || _onVisibleChange === void 0 || _onVisibleChange(e);
+    },
+    styles: _objectSpread({
+      mask: {
+        backdropFilter: 'blur(2px)'
+      }
+    }, previewStyle),
+    toolbarRender: function toolbarRender(_, _ref2) {
+      var scale = _ref2.transform.scale,
+        _ref2$actions = _ref2.actions,
+        onFlipY = _ref2$actions.onFlipY,
+        onFlipX = _ref2$actions.onFlipX,
+        onRotateLeft = _ref2$actions.onRotateLeft,
+        onRotateRight = _ref2$actions.onRotateRight,
+        onZoomOut = _ref2$actions.onZoomOut,
+        onZoomIn = _ref2$actions.onZoomIn;
+      return /*#__PURE__*/_jsxs(Flexbox, {
+        className: styles.toolbar,
+        gap: 4,
+        horizontal: true,
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          icon: FlipHorizontal,
+          onClick: onFlipX
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          icon: FlipVertical,
+          onClick: onFlipY
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          icon: RotateCcw,
+          onClick: onRotateLeft
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          icon: RotateCw,
+          onClick: onRotateRight
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          disable: scale === 1,
+          icon: ZoomOut,
+          onClick: onZoomOut
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          color: '#fff',
+          disable: scale === 50,
+          icon: ZoomIn,
+          onClick: onZoomIn
+        })]
+      });
+    }
+  }, rest);
+};
+export default usePreview;

package/es/Markdown/index.js

@@ -3,14 +3,15 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock", "onDoubleClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { Collapse, Divider, Image, Typography } from 'antd';
+import { Collapse, Divider, Typography } from 'antd';
 import { memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { Flexbox } from 'react-layout-kit';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
+import Image from "../Image";
+import ImageGallery from "../Image/ImageGallery";
 import { CodeFullFeatured, CodeLite } from "./CodeBlock";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,19 +43,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       });
     },
     img: function img(props) {
-      return /*#__PURE__*/_jsx(Flexbox, {
-        className: styles.imageWrapper,
-        children: /*#__PURE__*/_jsx(Image, _objectSpread({
-          preview: {
-            styles: {
-              mask: {
-                backdropFilter: 'blur(2px)'
-              }
-            }
-          },
-          wrapperClassName: styles.image
-        }, props))
-      });
+      return /*#__PURE__*/_jsx(Image, _objectSpread({}, props));
     },
     pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite
   };
@@ -62,14 +51,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     className: className,
     onDoubleClick: onDoubleClick,
     style: style,
-    children: /*#__PURE__*/_jsx(Image.PreviewGroup, {
-      preview: {
-        styles: {
-          mask: {
-            backdropFilter: 'blur(2px)'
-          }
-        }
-      },
+    children: /*#__PURE__*/_jsx(ImageGallery, {
       children: /*#__PURE__*/_jsx(ErrorBoundary, {
         fallback: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
           className: styles.markdown,

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 import { css } from 'antd-style';
-import { readableColor } from 'polished';
+import { readableColor, rgba } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary {\n    color: ", " !important;\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-image-preview-close,\n    .", "-image-preview-switch-right,.", "-image-preview-switch-left {\n    ", ";\n    border-radius: ", "px;\n    background: ", ";\n\n    width: 32px;\n    height: 32px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    padding: 0;\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.stylish.blur, token.borderRadiusLG, rgba(token.colorBgMask, 0.1), token.prefixCls);
 });

package/es/index.d.ts

@@ -46,6 +46,8 @@ export { default as Highlighter, type HighlighterProps, SyntaxHighlighter, type
 export { useChatListActionsBar } from './hooks/useChatListActionsBar';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
 export * from './Icon/icons';
+export { default as Image, type ImageProps } from './Image';
+export { default as ImageGallery, type ImageGalleryProps } from './Image/ImageGallery';
 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, type ListItemProps } from './List';

package/es/index.js

@@ -45,6 +45,8 @@ export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { useChatListActionsBar } from "./hooks/useChatListActionsBar";
 export { default as Icon } from "./Icon";
 export * from "./Icon/icons";
+export { default as Image } from "./Image";
+export { default as ImageGallery } from "./Image/ImageGallery";
 export { Input, TextArea } from "./Input";
 export { default as Layout, LayoutFooter, LayoutHeader, LayoutMain, LayoutSidebar, LayoutSidebarInner, LayoutToc } from "./Layout";
 export { default as List } from "./List";

package/package.json

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