@lobehub/ui 1.19.0 → 1.20.0

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,12 +1,14 @@
 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 { Loader2 } from 'lucide-react';
 import { memo } 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,
@@ -22,6 +24,8 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
     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),
@@ -53,19 +57,27 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
+  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/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,24 @@
 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 { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Icon = function Icon(_ref) {
+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 fontSize;
   var strokeWidth;
-  var SvgIcon = icon;
   switch (size) {
     case 'large':
       fontSize = 24;
@@ -35,9 +42,17 @@ var Icon = function Icon(_ref) {
       }
       break;
   }
-  return /*#__PURE__*/_jsx(SvgIcon, _objectSpread({
-    size: fontSize,
-    strokeWidth: strokeWidth
-  }, props));
-};
-export default /*#__PURE__*/memo(Icon);
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(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,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    spin: import("antd-style").SerializedStyles;
+}>;

package/es/Icon/style.js

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+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 {
+    spin: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
+  };
+});

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.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",