@lobehub/ui 1.19.0 → 1.20.1

package/es/ActionIcon/index.d.ts

@@ -28,7 +28,11 @@ export interface ActionIconProps extends DivProps {
      * @description The icon element to be rendered
      * @type LucideIcon
      */
-    icon: LucideIcon;
+    icon?: LucideIcon;
+    /**
+     * @description Set the loading status of ActionIcon
+     */
+    loading?: boolean;
     /**
      * @description Handle click action
      */

package/es/ActionIcon/index.js

@@ -1,34 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick"];
+var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading"];
 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 { Loader2 } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { Icon, Spotlight, Tooltip } from "./..";
 import { 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";
-var ActionIcon = /*#__PURE__*/memo(function (_ref) {
-  var className = _ref.className,
-    active = _ref.active,
-    icon = _ref.icon,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'normal' : _ref$size,
-    style = _ref.style,
-    glass = _ref.glass,
-    title = _ref.title,
-    placement = _ref.placement,
-    _ref$arrow = _ref.arrow,
-    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
-    spotlight = _ref.spotlight,
-    onClick = _ref.onClick,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles({
-      active: Boolean(active),
-      glass: Boolean(glass)
-    }),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+var calcSize = function calcSize(size) {
   var blockSize;
   var borderRadius;
   switch (size) {
@@ -53,19 +35,60 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
+  return {
+    blockSize: blockSize,
+    borderRadius: borderRadius
+  };
+};
+var ActionIcon = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    active = _ref.active,
+    icon = _ref.icon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'normal' : _ref$size,
+    style = _ref.style,
+    glass = _ref.glass,
+    title = _ref.title,
+    placement = _ref.placement,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+    spotlight = _ref.spotlight,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    loading = _ref.loading,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      active: Boolean(active),
+      glass: Boolean(glass)
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var _useMemo = useMemo(function () {
+      return calcSize(size);
+    }, [size]),
+    blockSize = _useMemo.blockSize,
+    borderRadius = _useMemo.borderRadius;
+  var content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      icon: icon,
+      size: size === 'site' ? 'normal' : size
+    }), children]
+  });
+  var spin = /*#__PURE__*/_jsx(Icon, {
+    icon: Loader2,
+    size: size === 'site' ? 'normal' : size,
+    spin: true
+  });
   var actionIconBlock = /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.block, className),
-    onClick: onClick,
+    onClick: loading ? undefined : onClick,
     style: _objectSpread({
       width: blockSize,
       height: blockSize,
       borderRadius: borderRadius
     }, style)
   }, props), {}, {
-    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Icon, {
-      icon: icon,
-      size: size === 'site' ? 'normal' : size
-    })]
+    children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), loading ? spin : content]
   }));
   if (!title) return actionIconBlock;
   return /*#__PURE__*/_jsx(Tooltip, {

package/es/Avatar/index.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
-export interface AvatarProps {
+/// <reference types="react" />
+import { type AvatarProps as AntAvatarProps } from 'antd';
+export interface AvatarProps extends AntAvatarProps {
     /**
      * @description The URL or base64 data of the avatar image
      */
@@ -23,5 +24,5 @@ export interface AvatarProps {
      */
     title?: string;
 }
-declare const Avatar: FC<AvatarProps>;
+declare const Avatar: import("react").NamedExoticComponent<AvatarProps>;
 export default Avatar;

package/es/Avatar/index.js

@@ -1,51 +1,43 @@
-import { Avatar as A } from 'antd';
-import { Center } from 'react-layout-kit';
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "avatar", "title", "size", "shape", "background"];
+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 { Avatar as AntAvatar } from 'antd';
+import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Avatar = function Avatar(_ref) {
-  var avatar = _ref.avatar,
+var Avatar = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    avatar = _ref.avatar,
     title = _ref.title,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 40 : _ref$size,
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
-    background = _ref.background;
-  var _useStyles = useStyles(),
+    background = _ref.background,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      background: background,
+      size: size
+    }),
     styles = _useStyles.styles,
-    theme = _useStyles.theme;
-  var backgroundColor = background !== null && background !== void 0 ? background : theme.colorBgContainer;
+    cx = _useStyles.cx;
   var isImage = avatar && ['/', 'http', 'data:'].some(function (i) {
     return avatar.startsWith(i);
   });
-  return /*#__PURE__*/_jsx(Center, {
-    className: styles.container,
-    style: {
-      width: size,
-      height: size,
-      borderRadius: shape === 'circle' ? '50%' : 6,
-      backgroundColor: backgroundColor,
-      borderWidth: isImage ? 1 : 0
-    },
-    children: !avatar ? /*#__PURE__*/_jsx(A, {
-      shape: shape,
-      size: size,
-      children: title === null || title === void 0 ? void 0 : title.slice(0, 2)
-    }) : isImage ? /*#__PURE__*/_jsx(A, {
-      className: styles.border,
-      shape: shape,
-      size: size,
-      src: avatar
-    }) : /*#__PURE__*/_jsx(Center, {
-      className: styles.border,
-      style: {
-        width: size,
-        height: size,
-        fontSize: size / 2,
-        borderRadius: shape === 'circle' ? '50%' : 6,
-        backgroundColor: backgroundColor
-      },
-      children: avatar
-    })
-  });
-};
+  var text = isImage ? title : avatar;
+  return !isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
+    className: cx(styles.avatar, className),
+    shape: shape,
+    size: size
+  }, props), {}, {
+    children: text === null || text === void 0 ? void 0 : text.toUpperCase().slice(0, 2)
+  })) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
+    className: cx(styles.avatar, className),
+    shape: shape,
+    size: size,
+    src: avatar
+  }, props));
+});
 export default Avatar;

package/es/Avatar/style.d.ts

@@ -1,4 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
-    border: import("antd-style").SerializedStyles;
+export declare const useStyles: (props?: {
+    background?: string | undefined;
+    size: number;
+} | undefined) => import("antd-style").ReturnStyles<{
+    avatar: import("antd-style").SerializedStyles;
 }>;

package/es/Avatar/style.js

@@ -1,11 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { readableColor } from 'polished';
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
+  var background = _ref2.background,
+    size = _ref2.size;
+  var backgroundColor = background !== null && background !== void 0 ? background : token.colorBgContainer;
+  var color = readableColor(backgroundColor);
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    > * {\n      cursor: pointer;\n    }\n  "]))),
-    border: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), token.colorSplit)
+    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        font-size: ", "px;\n        font-weight: 700;\n        line-height: 1;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n\n        > * {\n          cursor: pointer;\n        }\n      "])), size * 0.5, color, backgroundColor, background ? 'transparent' : token.colorSplit)
   };
 });

package/es/Icon/index.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import { SvgProps } from "../types";
+import { DivProps } from "../types";
 export declare type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;
     strokeWidth?: number;
 };
-export interface IconProps extends SvgProps {
+export interface IconProps extends DivProps {
     /**
      * @description The icon element to be rendered
      * @type LucideIcon
@@ -16,6 +16,11 @@ export interface IconProps extends SvgProps {
      * @default 'normal'
      */
     size?: IconSize;
+    /**
+     * @description Rotate icon with animation
+     * @default false
+     */
+    spin?: boolean;
 }
-declare const _default: import("react").NamedExoticComponent<IconProps>;
-export default _default;
+declare const Icon: import("react").NamedExoticComponent<IconProps>;
+export default Icon;

package/es/Icon/index.js

@@ -1,17 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size"];
+var _excluded = ["icon", "size", "style", "className", "spin"];
 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 { memo, useMemo } from 'react';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Icon = function Icon(_ref) {
-  var icon = _ref.icon,
-    size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded);
+var calcSize = function calcSize(size) {
   var fontSize;
   var strokeWidth;
-  var SvgIcon = icon;
   switch (size) {
     case 'large':
       fontSize = 24;
@@ -35,9 +32,38 @@ var Icon = function Icon(_ref) {
       }
       break;
   }
-  return /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
-    size: fontSize,
+  return {
+    fontSize: fontSize,
     strokeWidth: strokeWidth
-  }, props));
+  };
 };
-export default /*#__PURE__*/memo(Icon);
+var Icon = /*#__PURE__*/memo(function (_ref) {
+  var icon = _ref.icon,
+    size = _ref.size,
+    style = _ref.style,
+    className = _ref.className,
+    spin = _ref.spin,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var SvgIcon = icon;
+  var _useMemo = useMemo(function () {
+      return calcSize(size);
+    }, [size]),
+    fontSize = _useMemo.fontSize,
+    strokeWidth = _useMemo.strokeWidth;
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.icon, spin && styles.spin, className),
+    style: _objectSpread({
+      width: fontSize,
+      height: fontSize
+    }, style)
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(SvgIcon, {
+      size: fontSize,
+      strokeWidth: strokeWidth
+    })
+  }));
+});
+export default Icon;

package/es/Icon/style.d.ts

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

package/es/Icon/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles, keyframes } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n  "])));
+  return {
+    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
+    spin: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
+  };
+});

package/es/Input/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var type = _ref2.type;
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder);
   return {
-    input: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          max-width: 100%;\n          height: 36px;\n          padding: 0 12px;\n\n          transition: background-color 100ms ", ";\n\n          input {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary)),
+    input: cx(typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n\n          max-width: 100%;\n          height: 36px;\n          padding: 0 12px;\n\n          transition: background-color 100ms ", ",\n            border-color 200ms ", ";\n\n          input {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n\n          &.ant-input-affix-wrapper-focused {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, token.colorTextQuaternary)),
     textarea: cx(typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: 8px 12px;\n          transition: background-color 100ms ", ";\n\n          textarea {\n            background: transparent;\n          }\n\n          &:hover {\n            background-color: ", ";\n            border-color: ", ";\n          }\n\n          &:focus {\n            border-color: ", ";\n          }\n        "])), token.motionEaseOut, token.colorFillTertiary, token.colorBorder, token.colorTextQuaternary))
   };
 });

package/es/SearchBar/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n\n    .ant-input-affix-wrapper {\n      &:hover {\n        border-color: ", ";\n      }\n    }\n\n    .ant-input-affix-wrapper-focused {\n      border-color: ", ";\n\n      &:hover {\n        border-color: ", ";\n      }\n    }\n  "])), token.colorBorder, token.colorTextQuaternary, token.colorTextQuaternary),
+    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
     input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
     tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
     icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)

package/es/Spotlight/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
 export interface SpotlightProps extends DivProps {
+    /**
+     * @description The size of the spotlight circle
+     * @default 64
+     */
     size?: number;
 }
 declare const Spotlight: import("react").NamedExoticComponent<SpotlightProps>;

package/es/types/index.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export declare type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
-export declare type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-export declare type InputProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type TextAreaProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+import { type HTMLAttributes } from 'react';
+export declare type DivProps = HTMLAttributes<HTMLDivElement>;
+export declare type SvgProps = HTMLAttributes<SVGSVGElement>;
+export declare type ImgProps = HTMLAttributes<HTMLImageElement>;
+export declare type InputProps = HTMLAttributes<HTMLInputElement>;
+export declare type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.19.0",
+  "version": "1.20.1",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -114,7 +114,6 @@
     "antd": "^5",
     "antd-style": "^3",
     "commitlint": "^17",
-    "commitlint-config-gitmoji": "^2",
     "concurrently": "^8",
     "cross-env": "^7",
     "dumi": "^2",