@lobehub/ui 1.90.0 → 1.92.0

package/es/Avatar/index.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "
 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 { memo, useMemo } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { getEmoji } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
@@ -24,7 +24,9 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
     return avatar.startsWith(index);
   }));
-  var emoji = avatar && !isImage && getEmoji(avatar);
+  var emoji = useMemo(function () {
+    return avatar && !isImage && getEmoji(avatar);
+  }, [avatar]);
   var _useStyles = useStyles({
       background: background,
       isEmoji: Boolean(emoji),

package/es/EmptyCard/index.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DivProps } from "..";
+export interface EmptyCardProps extends DivProps {
+    alt?: string;
+    cover?: string;
+    defaultVisible?: boolean;
+    desc: string;
+    height?: number;
+    onVisibleChange?: (visible: boolean) => void;
+    title: string;
+    visible?: boolean;
+    width?: number;
+}
+declare const EmptyCard: import("react").NamedExoticComponent<EmptyCardProps>;
+export default EmptyCard;

package/es/EmptyCard/index.js

@@ -0,0 +1,67 @@
+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 = ["cover", "visible", "defaultVisible", "onVisibleChange", "alt", "title", "desc", "width", "height"];
+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 { ActionIcon } from "./..";
+import { X } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useMergeState from 'use-merge-value';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EmptyCard = /*#__PURE__*/memo(function (_ref) {
+  var cover = _ref.cover,
+    visible = _ref.visible,
+    defaultVisible = _ref.defaultVisible,
+    onVisibleChange = _ref.onVisibleChange,
+    alt = _ref.alt,
+    title = _ref.title,
+    desc = _ref.desc,
+    width = _ref.width,
+    height = _ref.height,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useMergeState = useMergeState(true, {
+      defaultValue: defaultVisible,
+      onChange: onVisibleChange,
+      value: visible
+    }),
+    _useMergeState2 = _slicedToArray(_useMergeState, 2),
+    value = _useMergeState2[0],
+    setValue = _useMergeState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  if (!value) return null;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    className: styles.container
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(ActionIcon, {
+      className: styles.close,
+      icon: X,
+      onClick: function onClick() {
+        return setValue(false);
+      },
+      size: {
+        blockSize: 24,
+        fontSize: 16
+      }
+    }), cover && /*#__PURE__*/_jsx("img", {
+      alt: alt,
+      className: styles.image,
+      height: height,
+      src: cover,
+      width: width
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.content,
+      children: [title && /*#__PURE__*/_jsx("h3", {
+        children: title
+      }), desc && /*#__PURE__*/_jsx("p", {
+        className: styles.desc,
+        children: desc
+      })]
+    })]
+  }));
+});
+export default EmptyCard;

package/es/EmptyCard/style.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    close: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    content: import("antd-style").SerializedStyles;
+    desc: import("antd-style").SerializedStyles;
+    image: import("antd-style").SerializedStyles;
+}>;

package/es/EmptyCard/style.js

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
+  return {
+    close: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 8px;\n    right: 8px;\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    overflow: hidden;\n\n    background: linear-gradient(\n      to bottom,\n      ", ",\n      ", "\n    );\n    border: 1px solid ", ";\n    border-radius: ", "px;\n  "])), isDarkMode ? token.colorBgElevated : token.colorBgLayout, token.colorBgContainer, token.colorBorderSecondary, token.borderRadius),
+    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 0 16px 16px;\n  "]))),
+    desc: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextDescription),
+    image: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    align-self: center;\n  "])))
+  };
+});

package/es/FluentEmoji/index.js

@@ -56,10 +56,7 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
         }
     }
   }, [type, emoji]);
-  var isFallback = useMemo(function () {
-    return type === 'pure' || !emojiUrl || loadingFail;
-  }, []);
-  if (isFallback) return /*#__PURE__*/_jsx("div", {
+  if (type === 'pure' || !emojiUrl || loadingFail) return /*#__PURE__*/_jsx("div", {
     className: cx(styles.container, className),
     style: _objectSpread({
       fontSize: size * 0.9,

package/es/SearchBar/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="react" />
 import { type InputProps } from "../Input";
 export interface SearchBarProps extends InputProps {
+    defaultValue?: string;
     /**
      * @description Whether to enable the shortcut key to focus on the input
      * @default false
      */
     enableShortKey?: boolean;
+    onInputChange?: (value: string) => void;
     /**
      * @description The shortcut key to focus on the input. Only works if `enableShortKey` is true
      * @default 'f'
@@ -16,6 +18,7 @@ export interface SearchBarProps extends InputProps {
      * @default false
      */
     spotlight?: boolean;
+    value?: string;
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/es/SearchBar/index.js

@@ -1,11 +1,12 @@
 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 = ["spotlight", "className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
+var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChange", "placeholder", "enableShortKey", "shortKey"];
 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 { Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
+import useControlledState from 'use-merge-value';
 import Icon from "../Icon";
 import { Input } from "../Input";
 import Spotlight from "../Spotlight";
@@ -14,15 +15,24 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
-  var spotlight = _ref.spotlight,
+  var defaultValue = _ref.defaultValue,
+    spotlight = _ref.spotlight,
     className = _ref.className,
     value = _ref.value,
-    _onChange = _ref.onChange,
+    onInputChange = _ref.onInputChange,
     placeholder = _ref.placeholder,
     enableShortKey = _ref.enableShortKey,
     _ref$shortKey = _ref.shortKey,
     shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
     properties = _objectWithoutProperties(_ref, _excluded);
+  var _useControlledState = useControlledState(defaultValue, {
+      defaultValue: defaultValue,
+      onChange: onInputChange,
+      value: value
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    inputValue = _useControlledState2[0],
+    setInputValue = _useControlledState2[1];
   var _useState = useState('Ctrl'),
     _useState2 = _slicedToArray(_useState, 2),
     symbol = _useState2[0],
@@ -31,10 +41,6 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     showTag = _useState4[0],
     setShowTag = _useState4[1];
-  var _useState5 = useState(value),
-    _useState6 = _slicedToArray(_useState5, 2),
-    inputValue = _useState6[0],
-    setInputValue = _useState6[1];
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -69,7 +75,6 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       onChange: function onChange(e) {
         setInputValue(e.target.value);
         setShowTag(!e.target.value);
-        if (_onChange) _onChange(e);
       },
       onFocus: function onFocus() {
         return setShowTag(false);

package/es/SelectWithImg/index.d.ts

@@ -0,0 +1,27 @@
+import { IconProps } from "..";
+import { SelectProps } from 'antd';
+import { type CSSProperties, ReactNode } from 'react';
+export interface SelectWithImgOptionItem {
+    icon?: IconProps['icon'];
+    img: string;
+    label: ReactNode;
+    value: string;
+}
+export interface SelectWithImgProps {
+    className?: string;
+    classNames?: {
+        img?: string;
+    };
+    defaultValue?: SelectProps['defaultValue'];
+    height?: number;
+    onChange?: (value: this['value']) => void;
+    options?: SelectWithImgOptionItem[];
+    style?: CSSProperties;
+    styles?: {
+        img?: CSSProperties;
+    };
+    value?: SelectProps['value'];
+    width?: number;
+}
+declare const SelectWithImg: import("react").NamedExoticComponent<SelectWithImgProps>;
+export default SelectWithImg;

package/es/SelectWithImg/index.js

@@ -0,0 +1,78 @@
+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 { Icon } from "./..";
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+import { useStyles } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SelectWithImg = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 144 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 86 : _ref$height,
+    _ref$styles = _ref.styles,
+    outStyles = _ref$styles === void 0 ? {} : _ref$styles,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames;
+  var _useControlledState = useControlledState(defaultValue, {
+      defaultValue: defaultValue,
+      onChange: onChange,
+      value: value
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    currentValue = _useControlledState2[0],
+    setCurrentValue = _useControlledState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx(Flexbox, {
+    className: className,
+    gap: 16,
+    horizontal: true,
+    style: style,
+    children: options === null || options === void 0 ? void 0 : options.map(function (item) {
+      var isActive = item.value === currentValue;
+      return /*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx(styles.container, isActive && styles.active),
+        gap: 4,
+        onClick: function onClick() {
+          return setCurrentValue(item.value);
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: cx(styles.imgCtn, isActive && styles.imgActive, classNames.img),
+          style: _objectSpread(_objectSpread({}, outStyles.img), {}, {
+            height: height,
+            width: width
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.img,
+            style: {
+              backgroundImage: "url(".concat(item.img, ")"),
+              height: height,
+              width: width
+            }
+          })
+        }), /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          gap: 4,
+          horizontal: true,
+          children: [item.icon && /*#__PURE__*/_jsx(Icon, {
+            icon: item.icon
+          }), item.label]
+        })]
+      }, item.value);
+    })
+  });
+});
+export default SelectWithImg;

package/es/SelectWithImg/styles.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    active: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    img: string;
+    imgActive: import("antd-style").SerializedStyles;
+    imgCtn: import("antd-style").SerializedStyles;
+}>;

package/es/SelectWithImg/styles.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx;
+  var hover = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      border-color: ", ";\n      box-shadow: 0 0 0 2px ", ";\n    }\n  "])), token.colorText, token.colorText);
+  var img = cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background-repeat: no-repeat;\n      background-position: center center;\n      background-size: cover;\n      border-radius: ", "px;\n      box-shadow: inset 0 0 0 2px ", ";\n\n      transition: all 100ms ", ";\n    "])), token.borderRadius, token.colorSplit, token.motionEaseOut), hover);
+  return {
+    active: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorText),
+    container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n    "])), token.colorTextDescription),
+    img: img,
+    imgActive: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      box-shadow: 0 0 0 2px ", ";\n\n      .", " {\n        box-shadow: none;\n      }\n    "])), token.colorTextTertiary, img),
+    imgCtn: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background: ", ";\n      border-radius: ", "px;\n\n      ", "\n    "])), token.colorFillTertiary, token.borderRadius, hover)
+  };
+});

package/es/SpotlightCard/SpotlightCardItem.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
-declare const SpotlightCardItem: import("react").NamedExoticComponent<DivProps>;
+export interface SpotlightCardItemProps extends DivProps {
+    borderRadius: number;
+    size: number;
+}
+declare const SpotlightCardItem: import("react").NamedExoticComponent<SpotlightCardItemProps>;
 export default SpotlightCardItem;

package/es/SpotlightCard/SpotlightCardItem.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className"];
+var _excluded = ["children", "className", "style", "borderRadius", "size"];
 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';
@@ -10,12 +10,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var SpotlightCardItem = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
+    style = _ref.style,
+    borderRadius = _ref.borderRadius,
+    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles({
+      borderRadius: borderRadius,
+      size: size
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(className, styles.itemContainer)
+    className: cx(className, styles.itemContainer),
+    style: _objectSpread({
+      borderRadius: borderRadius
+    }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Flexbox, {
       className: styles.content,

package/es/SpotlightCard/index.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
 import { DivProps } from "../types";
 export interface SpotlightCardProps<T = any> extends DivProps {
-    columns?: string;
+    borderRadius?: number;
+    columns?: string | number;
     gap?: number;
     items: T[];
     renderItem: (item: T) => ReactNode;
+    size?: number;
 }
 declare const SpotlightCard: import("react").NamedExoticComponent<SpotlightCardProps<any>>;
 export default SpotlightCard;

package/es/SpotlightCard/index.js

@@ -1,12 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "renderItem", "className", "columns", "gap", "style"];
+var _excluded = ["items", "renderItem", "className", "columns", "gap", "style", "size", "borderRadius"];
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import { memo, useEffect, useRef } from 'react';
+import { isNumber } from 'lodash-es';
+import { memo, useEffect, useMemo, useRef } from 'react';
 import SpotlightCardItem from "./SpotlightCardItem";
 import { CHILDREN_CLASSNAME, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,15 +16,27 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
     renderItem = _ref.renderItem,
     className = _ref.className,
     _ref$columns = _ref.columns,
-    columns = _ref$columns === void 0 ? '1fr 1fr 1fr' : _ref$columns,
+    columns = _ref$columns === void 0 ? 3 : _ref$columns,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 12 : _ref$gap,
     style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 800 : _ref$size,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 12 : _ref$borderRadius,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles({
+      borderRadius: borderRadius,
+      size: size
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var ref = useRef(null);
+  var gridColumns = useMemo(function () {
+    return isNumber(columns) ? Array.from({
+      length: columns
+    }).fill('1fr').join(' ') : columns;
+  }, [columns]);
   useEffect(function () {
     if (!ref.current) return;
     var fn = function fn(e) {
@@ -55,13 +68,15 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
     ref: ref,
     style: _objectSpread({
       gap: gap,
-      gridTemplateColumns: columns
+      gridTemplateColumns: gridColumns
     }, style)
   }, props), {}, {
     children: items.map(function (item, index) {
       var children = renderItem(item);
       return /*#__PURE__*/_jsx(SpotlightCardItem, {
+        borderRadius: borderRadius,
         className: CHILDREN_CLASSNAME,
+        size: size,
         children: children
       }, index);
     })

package/es/SpotlightCard/style.d.ts

@@ -1,5 +1,8 @@
 export declare const CHILDREN_CLASSNAME = "hover-card";
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    borderRadius: number;
+    size: number;
+} | undefined) => import("antd-style").ReturnStyles<{
     container: import("antd-style").SerializedStyles;
     content: import("antd-style").SerializedStyles;
     grid: import("antd-style").SerializedStyles;

package/es/SpotlightCard/style.js

@@ -2,17 +2,18 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
-var BORDER_RADIUS = 12;
 export var CHILDREN_CLASSNAME = 'hover-card';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     responsive = _ref.responsive,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
+  var size = _ref2.size,
+    borderRadius = _ref2.borderRadius;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover > .", "::after {\n      opacity: 1;\n    }\n  "])), CHILDREN_CLASSNAME),
-    content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    z-index: 2;\n\n    flex-grow: 1;\n\n    height: 100%;\n    margin: 1px;\n\n    background: ", ";\n    border-radius: ", "px;\n  "])), token.colorBgContainer, BORDER_RADIUS - 1),
-    grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: grid;\n\n    ", " {\n      display: flex;\n      flex-direction: column;\n    }\n  "])), responsive.mobile),
-    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    width: 100%;\n\n    background: ", ";\n    border-radius: ", "px;\n\n    &::before,\n    &::after {\n      content: '';\n\n      position: absolute;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n      border-radius: inherit;\n\n      transition: opacity 500ms;\n    }\n\n    &::before {\n      pointer-events: none;\n      user-select: none;\n      z-index: 3;\n      background: radial-gradient(\n        800px circle at var(--mouse-x) var(--mouse-y),\n        ", ",\n        transparent 40%\n      );\n    }\n\n    &::after {\n      z-index: 1;\n      background: radial-gradient(\n        600px circle at var(--mouse-x) var(--mouse-y),\n        ", ",\n        transparent 40%\n      );\n    }\n\n    :hover::before {\n      opacity: 1;\n    }\n  "])), rgba(token.colorBorder, 0.5), BORDER_RADIUS, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      &:hover > .", "::after {\n        opacity: 1;\n      }\n    "])), CHILDREN_CLASSNAME),
+    content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      z-index: 2;\n\n      flex-grow: 1;\n\n      height: 100%;\n      margin: 1px;\n\n      background: ", ";\n      border-radius: ", "px;\n    "])), token.colorBgContainer, borderRadius - 1),
+    grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: grid;\n\n      ", " {\n        display: flex;\n        flex-direction: column;\n      }\n    "])), responsive.mobile),
+    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    "])), rgba(token.colorBorder, 0.5), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
   };
 });

package/es/index.d.ts

@@ -21,6 +21,7 @@ export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
+export { default as EmptyCard, type EmptyCardProps } from './EmptyCard';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
@@ -53,6 +54,7 @@ export { default as MobileNavBarTitle, type MobileNavBarTitleProps, } from './Mo
 export { default as MobileSafeArea, type MobileSafeAreaProps } from './MobileSafeArea';
 export { default as MobileTabBar, type MobileTabBarItemProps, type MobileTabBarProps, } from './MobileTabBar';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
+export { default as SelectWithImg, type SelectWithImgOptionItem, type SelectWithImgProps, } from './SelectWithImg';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';

package/es/index.js

@@ -20,6 +20,7 @@ export { default as DraggablePanelHeader } from "./DraggablePanel/components/Dra
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
+export { default as EmptyCard } from "./EmptyCard";
 export { default as Features } from "./Features";
 export { default as FluentEmoji } from "./FluentEmoji";
 export { default as FontLoader } from "./FontLoader";
@@ -52,6 +53,7 @@ export { default as MobileNavBarTitle } from "./MobileNavBar/MobileNavBarTitle";
 export { default as MobileSafeArea } from "./MobileSafeArea";
 export { default as MobileTabBar } from "./MobileTabBar";
 export { default as SearchBar } from "./SearchBar";
+export { default as SelectWithImg } from "./SelectWithImg";
 export { default as SideNav } from "./SideNav";
 export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";

package/package.json

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