@lobehub/ui 1.101.2 → 1.102.0

package/es/Avatar/index.js

@@ -39,7 +39,7 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     className: cx(styles.avatar, className),
     shape: shape,
     size: size,
-    src: avatar
+    srcSet: avatar
   }, props)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,

package/es/ChatInputArea/Mobile.js

@@ -24,8 +24,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     minHeight = _ref$minHeight === void 0 ? 200 : _ref$minHeight,
     className = _ref.className,
     actions = _ref.actions,
-    _ref$safeArea = _ref.safeArea,
-    safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
+    safeArea = _ref.safeArea,
     expand = _ref.expand,
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? 'Type something to chat...' : _ref$placeholder,

package/es/ChatInputArea/style.mobile.js

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 12px 0;\n    "]))),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 12px 0;\n      background: ", ";\n      border-top: 1px solid ", ";\n    "])), token.colorBgLayout, rgba(token.colorBorder, 0.25)),
     inner: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 0 16px;\n    "]))),
     input: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: ", " !important;\n      border: none !important;\n    "])), token.colorFillSecondary)
   };

package/es/ChatItem/components/Actions.js

@@ -16,7 +16,7 @@ var Actions = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Flexbox, {
     align: 'flex-start',
     className: styles.actions,
-    role: "chat-item-actions",
+    role: "widget",
     children: actions
   });
 });

package/es/ChatItem/style.js

@@ -24,7 +24,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))),
     avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\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\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='widget'] {\n            display: flex;\n          }\n\n          time,\n          div[role='widget'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='widget'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),
     editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
     editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
     loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\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/ConfigProvider/index.d.ts

@@ -1,10 +1,12 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 import { CDN, CdnApi } from "../utils/genCdnUrl";
 type CdnFn = ({ pkg, version, path }: CdnApi) => string;
 export interface Config {
     customCdnFn?: CdnFn;
+    imgAs?: ElementType;
     proxy: CDN | 'custom';
 }
+export declare const ConfigContext: import("react").Context<Config | null>;
 declare const ConfigProvider: import("react").NamedExoticComponent<{
     children: ReactNode;
     config: Config;

package/es/ConfigProvider/index.js

@@ -1,7 +1,7 @@
 import { createContext, memo, useContext } from 'react';
 import { genCdnUrl } from "../utils/genCdnUrl";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ConfigContext = /*#__PURE__*/createContext(null);
+export var ConfigContext = /*#__PURE__*/createContext(null);
 var ConfigProvider = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     config = _ref.config;

package/es/EmptyCard/index.js

@@ -9,6 +9,7 @@ import { X } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useMergeState from 'use-merge-value';
+import Img from "../Img";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +48,7 @@ var EmptyCard = /*#__PURE__*/memo(function (_ref) {
         blockSize: 24,
         fontSize: 16
       }
-    }), cover && /*#__PURE__*/_jsx("img", {
+    }), cover && /*#__PURE__*/_jsx(Img, {
       alt: alt,
       className: styles.image,
       height: height,

package/es/Features/Item.js

@@ -6,6 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
+import Img from "../Img";
 import { useStyles } from "./style";
 
 // @ts-ignore
@@ -16,7 +17,7 @@ var Image = /*#__PURE__*/memo(function (_ref) {
     className = _ref.className,
     title = _ref.title,
     style = _ref.style;
-  return image.startsWith('http') ? /*#__PURE__*/_jsx("img", {
+  return image.startsWith('http') ? /*#__PURE__*/_jsx(Img, {
     alt: title,
     className: className,
     src: image,

package/es/FluentEmoji/index.js

@@ -5,6 +5,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { kebabCase } from 'lodash-es';
 import { memo, useMemo, useState } from 'react';
 import { useCdnFn } from "../ConfigProvider";
+import Img from "../Img";
 import { getEmojiNameByCharacter } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -72,7 +73,7 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
       height: size,
       width: size
     }, style),
-    children: /*#__PURE__*/_jsx("img", {
+    children: /*#__PURE__*/_jsx(Img, {
       alt: emoji,
       height: "100%",
       loading: "lazy",

package/es/Img/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ImageProps } from 'antd';
+import { ImgProps } from "../types";
+declare const Img: import("react").ForwardRefExoticComponent<ImgProps & ImageProps & import("react").RefAttributes<any>>;
+export default Img;

package/es/Img/index.js

@@ -0,0 +1,23 @@
+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 { createElement, forwardRef, useContext, useMemo } from 'react';
+import { ConfigContext } from "../ConfigProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+var createContainer = function createContainer(as) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    }));
+  });
+};
+var Img = /*#__PURE__*/forwardRef(function (props, ref) {
+  var config = useContext(ConfigContext);
+  var ImgContainer = useMemo(function () {
+    return createContainer((config === null || config === void 0 ? void 0 : config.imgAs) || 'img');
+  }, [config]);
+  return /*#__PURE__*/_jsx(ImgContainer, _objectSpread({
+    ref: ref
+  }, props));
+});
+export default Img;

package/es/Logo/index.js

@@ -7,6 +7,7 @@ import { useTheme } from 'antd-style';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { useCdnFn } from "../ConfigProvider";
+import Img from "../Img";
 import Divider from "./Divider";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
@@ -31,7 +32,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
   switch (type) {
     case '3d':
       {
-        logoComponent = /*#__PURE__*/_jsx("img", _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx(Img, _objectSpread({
           alt: "lobehub",
           src: genCdnUrl(LOGO_3D),
           style: _objectSpread({
@@ -43,7 +44,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
       }
     case 'flat':
       {
-        logoComponent = /*#__PURE__*/_jsx("img", {
+        logoComponent = /*#__PURE__*/_jsx(Img, {
           alt: "lobehub",
           src: genCdnUrl(LOGO_FLAT),
           style: _objectSpread({
@@ -77,7 +78,7 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
     case 'combine':
       {
         logoComponent = /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("img", {
+          children: [/*#__PURE__*/_jsx(Img, {
             alt: "lobehub",
             src: genCdnUrl(LOGO_3D),
             style: {

package/es/MobileNavBar/style.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     center: import("antd-style").SerializedStyles;
-    container: string;
+    container: import("antd-style").SerializedStyles;
     inner: import("antd-style").SerializedStyles;
     left: import("antd-style").SerializedStyles;
     right: import("antd-style").SerializedStyles;

package/es/MobileNavBar/style.js

@@ -1,15 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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;
+    token = _ref.token;
   return {
     center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      height: 100%;\n    "]))),
-    container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: none;\n        width: 100vw;\n        background: linear-gradient(\n          to bottom,\n          ", ",\n          ", "\n        );\n      "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n      width: 100vw;\n      background: ", ";\n    "])), token.colorBgLayout),
     inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n\n      width: 100%;\n      height: 44px;\n      min-height: 44px;\n      max-height: 44px;\n      padding: 0 6px;\n    "]))),
     left: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      justify-content: flex-start;\n      height: 100%;\n    "]))),
     right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      justify-content: flex-end;\n      height: 100%;\n    "])))

package/es/MobileTabBar/index.js

@@ -8,8 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MobileTabBar = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
-    _ref$safeArea = _ref.safeArea,
-    safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
+    safeArea = _ref.safeArea,
     style = _ref.style,
     items = _ref.items,
     activeKey = _ref.activeKey,

package/es/MobileTabBar/style.d.ts

@@ -1,6 +1,6 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     active: import("antd-style").SerializedStyles;
-    container: string;
+    container: import("antd-style").SerializedStyles;
     icon: import("antd-style").SerializedStyles;
     inner: import("antd-style").SerializedStyles;
     tab: import("antd-style").SerializedStyles;

package/es/MobileTabBar/style.js

@@ -4,12 +4,10 @@ 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;
+    token = _ref.token;
   return {
     active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorPrimary),
-    container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: none;\n\n        width: 100vw;\n        padding-bottom: 12px;\n\n        background: ", ";\n      "])), rgba(token.colorBgLayout, 0.5))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n\n      width: 100vw;\n\n      background: ", ";\n      border-top: 1px solid ", ";\n    "])), token.colorBgLayout, rgba(token.colorBorder, 0.25)),
     icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: 24px;\n      height: 24px;\n      font-size: 24px;\n    "]))),
     inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      width: 100%;\n      height: 48px;\n    "]))),
     tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      width: 48px;\n      height: 48px;\n      color: ", ";\n    "])), token.colorTextSecondary),

package/es/Modal/index.js

@@ -5,17 +5,14 @@ var _excluded = ["children", "title", "className", "wrapClassName", "width", "on
 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 { Modal as AntModal, ConfigProvider } from 'antd';
-import { Drawer } from 'antd';
+import { Modal as AntModal, ConfigProvider, Drawer } from 'antd';
 import { createStyles, useResponsive } from 'antd-style';
 import { X } from 'lucide-react';
 import { lighten } from 'polished';
 import { memo } from 'react';
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
-import MobileSafeArea from "../MobileSafeArea";
 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,
@@ -42,7 +39,7 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     styles = _useStyles.styles,
     cx = _useStyles.cx,
     theme = _useStyles.theme;
-  if (mobile) return /*#__PURE__*/_jsxs(Drawer, {
+  if (mobile) return /*#__PURE__*/_jsx(Drawer, {
     bodyStyle: {
       padding: 0
     },
@@ -55,7 +52,7 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     }),
     destroyOnClose: destroyOnClose,
     drawerStyle: {
-      background: theme.colorBgContainer
+      background: "linear-gradient(to bottom, ".concat(theme.colorBgContainer, ", ").concat(theme.colorBgLayout, ")")
     },
     headerStyle: {
       padding: '8px 4px'
@@ -66,9 +63,7 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     open: open,
     placement: 'bottom',
     title: title,
-    children: [children, /*#__PURE__*/_jsx(MobileSafeArea, {
-      position: 'bottom'
-    })]
+    children: children
   });
   return /*#__PURE__*/_jsx(ConfigProvider, {
     theme: {

package/es/{StroyBook → StoryBook}/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
-export interface StroyBookProps extends DivProps {
+export interface StoryBookProps extends DivProps {
     /**
      * @description The Leva store instance to be used by the component
      * @type levaStore
@@ -11,6 +11,6 @@ export interface StroyBookProps extends DivProps {
      */
     noPadding?: boolean;
 }
-export declare const StroyBook: import("react").NamedExoticComponent<StroyBookProps>;
-export default StroyBook;
+export declare const StoryBook: import("react").NamedExoticComponent<StoryBookProps>;
+export default StoryBook;
 export { useControls, useCreateStore } from 'leva';

package/es/{StroyBook → StoryBook}/index.js

@@ -10,7 +10,7 @@ import DraggablePanel from "../DraggablePanel";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var StroyBook = /*#__PURE__*/memo(function (_ref) {
+export var StoryBook = /*#__PURE__*/memo(function (_ref) {
   var levaStore = _ref.levaStore,
     noPadding = _ref.noPadding,
     className = _ref.className,
@@ -43,5 +43,5 @@ export var StroyBook = /*#__PURE__*/memo(function (_ref) {
     })]
   }));
 });
-export default StroyBook;
+export default StoryBook;
 export { useControls, useCreateStore } from 'leva';

package/es/index.d.ts

@@ -62,7 +62,15 @@ export { default as SliderWithInput, type SliderWithInputProps } from './SliderW
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
-export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
+export { default as StoryBook, type StoryBookProps, 
+/**
+ * @deprecated Use `StoryBookProps` instead. It was a typo.
+ */
+default as StroyBook, 
+/**
+ * @deprecated Use `StoryBookProps` instead. It was a typo.
+ */
+type StoryBookProps as StroyBookProps, useControls, useCreateStore, } from './StoryBook';
 export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';

package/es/index.js

@@ -61,7 +61,14 @@ export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
 export { default as Spotlight } from "./Spotlight";
 export { default as SpotlightCard } from "./SpotlightCard";
-export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
+export { default as StoryBook,
+/**
+ * @deprecated Use `StoryBookProps` instead. It was a typo.
+ */
+default as StroyBook
+/**
+ * @deprecated Use `StoryBookProps` instead. It was a typo.
+ */, useControls, useCreateStore } from "./StoryBook";
 export * from "./styles";
 export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";

package/package.json

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