@lobehub/ui 1.91.0 → 1.93.0

package/es/ChatInputArea/type.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ActionProps } from "./Action";
+export interface ChatInputBase extends ActionProps {
+    /**
+     * @description Default value for the input area
+     */
+    defaultValue?: string;
+    /**
+     * @description Footer content to be displayed below the input area
+     */
+    footer?: ReactNode;
+    /**
+     * @description Whether the input area is in loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * @description Callback function when the input value changes
+     * @param value - The current value of the input area
+     */
+    onInputChange?: (value: string) => void;
+    /**
+     * @description Callback function when the send button is clicked
+     * @param value - The current value of the input area
+     */
+    onSend?: (value: string) => void;
+    onStop?: () => void;
+    text?: {
+        send?: string;
+        stop?: string;
+    };
+    value?: string;
+}

package/es/ChatInputArea/type.js

@@ -0,0 +1 @@
+export {};

package/es/ChatItem/components/Actions.d.ts

@@ -2,6 +2,7 @@
 import { ChatItemProps } from "..";
 export interface ActionsProps {
     actions: ChatItemProps['actions'];
+    editing?: boolean;
     placement?: ChatItemProps['placement'];
     type?: ChatItemProps['type'];
 }

package/es/ChatItem/components/Actions.js

@@ -4,8 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Actions = /*#__PURE__*/memo(function (_ref) {
   var actions = _ref.actions,
     placement = _ref.placement,
-    type = _ref.type;
+    type = _ref.type,
+    editing = _ref.editing;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       type: type
     }),

package/es/ChatItem/components/BorderSpacing.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { ChatItemProps } from "..";
 export interface BorderSpacingProps {
-    borderSpacing?: ChatItemProps['borderSpacing'];
+    borderSpacing?: number;
 }
 declare const BorderSpacing: import("react").NamedExoticComponent<BorderSpacingProps>;
 export default BorderSpacing;

package/es/ChatItem/components/MessageContent.js

@@ -16,6 +16,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     type = _ref.type,
     primary = _ref.primary;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       primary: primary,
       type: type
@@ -24,7 +25,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   var content = /*#__PURE__*/_jsx(EditableMessage, {
     classNames: {
-      textarea: styles.editingInput
+      input: styles.editingInput
     },
     editButtonSize: 'small',
     editing: editing,

package/es/ChatItem/components/Title.js

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { formatTime } from "../../utils/formatTime";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,8 +14,10 @@ var Title = /*#__PURE__*/memo(function (_ref) {
       showTitle: showTitle
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs("title", {
+  return /*#__PURE__*/_jsxs(Flexbox, {
     className: styles.name,
+    gap: 4,
+    horizontal: true,
     children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
       children: formatTime(time)
     })]

package/es/ChatItem/index.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
+var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
 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 { useResponsive } from 'antd-style';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Actions from "./components/Actions";
 import Avatar from "./components/Avatar";
 import BorderSpacing from "./components/BorderSpacing";
@@ -13,13 +15,13 @@ import Title from "./components/Title";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var MOBILE_AVATAR_SIZE = 32;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var avatarAddon = _ref.avatarAddon,
     onAvatarClick = _ref.onAvatarClick,
     actions = _ref.actions,
     className = _ref.className,
     primary = _ref.primary,
-    borderSpacing = _ref.borderSpacing,
     loading = _ref.loading,
     message = _ref.message,
     _ref$placement = _ref.placement,
@@ -38,7 +40,10 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     text = _ref.text,
     ErrorMessage = _ref.ErrorMessage,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       primary: primary,
       showTitle: showTitle,
@@ -47,24 +52,28 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.container, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    gap: mobile ? 6 : 12,
+    horizontal: true
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(Avatar, {
       addon: avatarAddon,
       avatar: avatar,
       loading: loading,
       onClick: onAvatarClick,
-      placement: placement
-    }), /*#__PURE__*/_jsxs("div", {
+      placement: placement,
+      size: mobile ? MOBILE_AVATAR_SIZE : undefined
+    }), /*#__PURE__*/_jsxs(Flexbox, {
       className: styles.messageContainer,
       children: [/*#__PURE__*/_jsx(Title, {
         avatar: avatar,
         placement: placement,
         showTitle: showTitle,
         time: time
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsxs(Flexbox, {
         className: styles.messageContent,
+        gap: 8,
         children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
           ErrorMessage: ErrorMessage,
           error: error,
@@ -80,14 +89,15 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
           renderMessage: renderMessage,
           text: text,
           type: type
-        }), !editing && /*#__PURE__*/_jsx(Actions, {
+        }), /*#__PURE__*/_jsx(Actions, {
           actions: actions,
+          editing: editing,
           placement: placement,
           type: type
         })]
       })]
-    }), /*#__PURE__*/_jsx(BorderSpacing, {
-      borderSpacing: borderSpacing
+    }), mobile && type === 'block' && /*#__PURE__*/_jsx(BorderSpacing, {
+      borderSpacing: MOBILE_AVATAR_SIZE
     })]
   }));
 });

package/es/ChatItem/style.d.ts

@@ -1,12 +1,13 @@
 export declare const useStyles: (props?: {
     avatarSize?: number | undefined;
+    editing?: boolean | undefined;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
     title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
-    actions: import("antd-style").SerializedStyles;
+    actions: string;
     alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     avatarGroupContainer: import("antd-style").SerializedStyles;
@@ -15,8 +16,8 @@ export declare const useStyles: (props?: {
     editingInput: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;
-    messageContainer: import("antd-style").SerializedStyles;
-    messageContent: import("antd-style").SerializedStyles;
+    messageContainer: string;
+    messageContent: string;
     messageExtra: string;
     name: import("antd-style").SerializedStyles;
 }>;

package/es/ChatItem/style.js

@@ -1,34 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
     token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
+    isDarkMode = _ref.isDarkMode,
+    responsive = _ref.responsive;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle;
+    showTitle = _ref2.showTitle,
+    editing = _ref2.editing;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
+  var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
-    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: flex-start;\n        align-self: ", ";\n        justify-content: ", ";\n      "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
-    alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
-    avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    avatarGroupContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\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        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
-    editingContainer: cx(css(_templateObject9 || (_templateObject9 = _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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
-    editingInput: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        min-width: 800px !important;\n      "]))),
-    loading: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\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),
-    message: cx(typeStylish, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
-    messageContent: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
+    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: flex-start;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
+    alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
+    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\n          display: flex;\n          flex-direction: ", ";\n          justify-content: revert;\n\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        "])), placement === 'left' ? 'row' : 'row-reverse', 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        display: flex;\n        align-items: center;\n        justify-content: center;\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),
+    message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          align-items: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end')),
+    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n          flex-direction: ", ";\n          align-items: ", ";\n\n          ", " {\n            flex-direction: column;\n          }\n        "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end', responsive.mobile)),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
+    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        flex-direction: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/ChatItem/type.d.ts

@@ -13,10 +13,6 @@ export interface ChatItemProps {
      */
     avatar: MetaData;
     avatarAddon?: ReactNode;
-    /**
-     * @description Whether to add border spacing
-     */
-    borderSpacing?: number | string;
     /**
      * @description Custom CSS class name for the chat item
      */

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;
+}>;