@lobehub/ui 2.23.1 → 2.23.2

package/es/Accordion/AccordionItem.js

@@ -215,13 +215,13 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
       paddingBlock: paddingBlock,
       paddingInline: paddingInline,
       ref: ref,
-      style: {
+      style: _objectSpread({
         alignItems: 'center',
         cursor: disabled ? 'not-allowed' : 'pointer',
         opacity: disabled ? 0.5 : undefined,
         overflow: 'hidden',
         width: '100%'
-      },
+      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.header),
       variant: customVariant || variant,
       children: indicatorPlacementFinal === 'start' ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsxs(Flexbox, {

package/es/Accordion/style.js

@@ -11,9 +11,9 @@ export var useStyles = createStyles(function (_ref) {
     contentInner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      /* Content wrapper for animation */\n    "]))),
     divider: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      margin-block: 0;\n    "]))),
     header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      &:hover .accordion-action {\n        width: auto;\n        opacity: 1;\n      }\n\n      &:focus-visible {\n        border-radius: ", "px;\n        outline: 2px solid ", ";\n        outline-offset: 2px;\n      }\n    "])), token.borderRadiusLG, token.colorPrimary),
-    icon: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      color: ", ";\n      transition: transform 200ms ", ";\n    "])), token.colorTextDescription, token.motionEaseOut),
+    icon: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      transition: transform 200ms ", ";\n    "])), token.motionEaseOut),
     iconRotate: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      transform: rotate(90deg);\n    "]))),
-    indicator: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      display: flex;\n      flex-shrink: 0;\n      align-items: center;\n\n      font-size: 18px;\n\n      transition: transform 200ms ", ";\n    "])), token.motionEaseOut),
+    indicator: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      display: flex;\n      flex-shrink: 0;\n      align-items: center;\n\n      font-size: 18px;\n      color: ", ";\n\n      transition: transform 200ms ", ";\n    "])), token.colorTextDescription, token.motionEaseOut),
     item: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      position: relative;\n      display: flex;\n      flex-direction: column;\n    "])))
   };
 });

package/es/Alert/Alert.js

@@ -1,26 +1,21 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
+var _excluded = ["closeIcon", "closable", "description", "showIcon", "type", "glass", "icon", "colorfulText", "iconProps", "style", "extra", "classNames", "styles", "text", "extraDefaultExpand", "extraIsolate", "banner", "variant", "ref"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-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; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Alert as AntdAlert, message } from 'antd';
+import { Alert as AntdAlert } from 'antd';
 import { cva } from 'class-variance-authority';
 import { camelCase } from 'lodash-es';
-import { AlertTriangle, CheckCircle, ChevronDown, ChevronRight, Info, X, XCircle } from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
+import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';
+import { memo, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import { Accordion, AccordionItem } from "../Accordion";
 import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
 import { useStyles } from "./style";
@@ -58,6 +53,7 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     extra = _ref.extra,
     classNames = _ref.classNames,
+    customStyles = _ref.styles,
     text = _ref.text,
     _ref$extraDefaultExpa = _ref.extraDefaultExpand,
     extraDefaultExpand = _ref$extraDefaultExpa === void 0 ? false : _ref$extraDefaultExpa,
@@ -67,10 +63,6 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
     ref = _ref.ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(extraDefaultExpand),
-    _useState2 = _slicedToArray(_useState, 2),
-    expand = _useState2[0],
-    setExpand = _useState2[1];
   var _useStyles = useStyles({
       closable: !!closable,
       hasTitle: !!description,
@@ -145,22 +137,6 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
       /* eslint-enable sort-keys-fix/sort-keys-fix */
     });
   }, [styles]);
-  var extraBodyVariants = useMemo(function () {
-    return cva(styles.extraBody, {
-      defaultVariants: {
-        variant: 'filled'
-      },
-      /* eslint-disable sort-keys-fix/sort-keys-fix */
-      variants: {
-        variant: {
-          filled: null,
-          outlined: null,
-          borderless: styles.borderless
-        }
-      }
-      /* eslint-enable sort-keys-fix/sort-keys-fix */
-    });
-  }, [styles]);
   var isInsideExtra = Boolean(!extraIsolate && !!extra);
   var alert = /*#__PURE__*/_jsx(AntdAlert, _objectSpread({
     banner: banner,
@@ -184,11 +160,11 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
     }, iconProps)),
     ref: ref,
     showIcon: showIcon,
-    style: _objectSpread({
+    style: _objectSpread(_objectSpread({
       background: colors(theme, type, 'fillTertiary'),
       borderColor: colors(theme, type, 'fillSecondary'),
       color: colorfulText ? colors(theme, type) : undefined
-    }, style),
+    }, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.alert),
     type: type === 'secondary' ? 'info' : type
   }, rest));
   if (!extra) return alert;
@@ -199,7 +175,8 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
   });
   return /*#__PURE__*/_jsxs(Flexbox, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.container,
-    children: [alert, /*#__PURE__*/_jsxs(Flexbox, {
+    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.container,
+    children: [alert, /*#__PURE__*/_jsx(Flexbox, {
       className: extraVariants({
         banner: banner,
         variant: variant
@@ -210,36 +187,36 @@ var Alert = /*#__PURE__*/memo(function (_ref) {
         color: colors(theme, type),
         fontSize: description ? 14 : 12
       },
-      children: [/*#__PURE__*/_jsxs(Flexbox, {
-        align: 'center',
-        className: extraHeaderVariants({
-          variant: variant
-        }),
-        gap: message ? 6 : 10,
-        horizontal: true,
-        style: {
-          borderColor: colors(theme, type, 'fillSecondary')
-        },
-        children: [/*#__PURE__*/_jsx(ActionIcon, {
-          color: colors(theme, type),
-          icon: expand ? ChevronDown : ChevronRight,
-          onClick: function onClick() {
-            return setExpand(!expand);
+      children: /*#__PURE__*/_jsx(Accordion, {
+        defaultExpandedKeys: extraDefaultExpand ? ['extra'] : [],
+        children: /*#__PURE__*/_jsx(AccordionItem, {
+          classNames: {
+            content: classNames === null || classNames === void 0 ? void 0 : classNames.extraContent,
+            header: extraHeaderVariants({
+              variant: variant
+            })
           },
-          size: 18
-        }), /*#__PURE__*/_jsx("div", {
-          className: cx(styles.expandText),
-          onClick: function onClick() {
-            return setExpand(!expand);
+          itemKey: 'extra',
+          styles: {
+            content: _objectSpread({
+              fontSize: 12,
+              padding: 8
+            }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.extraContent),
+            header: {
+              borderColor: colors(theme, type, 'fillSecondary')
+            },
+            indicator: {
+              color: colors(theme, type)
+            },
+            title: {
+              color: colors(theme, type),
+              fontSize: 12
+            }
           },
-          children: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details'
-        })]
-      }), expand && /*#__PURE__*/_jsx("div", {
-        className: extraBodyVariants({
-          variant: variant
-        }),
-        children: extra
-      })]
+          title: (text === null || text === void 0 ? void 0 : text.detail) || 'Show Details',
+          children: extra
+        })
+      })
     })]
   });
 });

package/es/Alert/style.d.ts

@@ -9,7 +9,6 @@ export declare const useStyles: (props?: {
     colorfulText: import("antd-style").SerializedStyles;
     expandText: import("antd-style").SerializedStyles;
     extra: import("antd-style").SerializedStyles;
-    extraBody: import("antd-style").SerializedStyles;
     extraHeader: import("antd-style").SerializedStyles;
     filled: import("antd-style").SerializedStyles;
     glass: string;

package/es/Alert/style.js

@@ -1,4 +1,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
@@ -15,16 +15,15 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     banner: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        border: none !important;\n        border-radius: 0 !important;\n      "]))),
     borderless: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        padding: 0 !important;\n        border: none !important;\n        background: transparent !important;\n      "]))),
-    borderlessExtraHeader: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin-block-start: ", "px;\n        margin-inline-start: ", "px;\n        padding-inline: 0;\n      "])), baseBlockPadding, -baseInlinePadding * 0.25),
+    borderlessExtraHeader: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin-block-start: ", "px;\n        padding-inline: 0;\n      "])), baseBlockPadding),
     colorfulText: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .", "-alert-message,.", "-alert-description {\n          color: inherit;\n        }\n      "])), prefixCls, prefixCls),
     expandText: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding-inline-end: 12px;\n\n        &:hover {\n          cursor: pointer;\n        }\n      "]))),
     extra: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        max-width: 100%;\n        border: 1px solid;\n        border-block-start: none;\n        border-end-start-radius: ", "px;\n        border-end-end-radius: ", "px;\n      "])), token.borderRadiusLG, token.borderRadiusLG),
-    extraBody: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow-x: auto;\n        width: 100%;\n        padding-block-end: ", "px;\n        padding-inline: ", "px;\n      "])), baseBlockPadding * 0.5, baseInlinePadding * 0.5),
-    extraHeader: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding-block: ", "px;\n        padding-inline: ", "px;\n        border-block-start: 1px dashed;\n      "])), baseBlockPadding * 0.5, baseInlinePadding * 0.5),
-    filled: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral([""]))),
+    extraHeader: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        border-block-start: 1px dashed;\n        border-radius: 0;\n        background: transparent !important;\n      "]))),
+    filled: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""]))),
     glass: stylish.blur,
-    hasExtra: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        border-block-end: none;\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n      "]))),
-    outlined: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        background: transparent !important;\n      "]))),
-    root: cx(css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ", "px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-block: ", "px;\n          padding-inline: ", "px\n            ", "px;\n\n          .", "-alert-message {\n            font-weight: ", ";\n            line-height: 24px;\n            word-break: normal;\n          }\n          .", "-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .", "-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        "])), hasTitle ? 12 : 8, baseBlockPadding, showIcon ? baseInlinePadding * 0.75 : baseInlinePadding, closable ? baseInlinePadding * 0.75 : baseInlinePadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n            .", "-alert-description {\n              line-height: 1.5;\n              word-break: normal;\n              opacity: 0.75;\n            }\n          "])), prefixCls))
+    hasExtra: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        border-block-end: none;\n        border-end-start-radius: 0;\n        border-end-end-radius: 0;\n      "]))),
+    outlined: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        background: transparent !important;\n      "]))),
+    root: cx(css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: row;\n          gap: ", "px;\n          align-items: flex-start;\n\n          max-width: 100%;\n          padding-block: ", "px;\n          padding-inline: ", "px\n            ", "px;\n\n          .", "-alert-message {\n            font-weight: ", ";\n            line-height: 24px;\n            word-break: normal;\n          }\n          .", "-alert-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n          .", "-alert-close-icon {\n            display: flex;\n            align-items: center;\n            height: 24px;\n            margin: 0;\n          }\n        "])), hasTitle ? 12 : 8, baseBlockPadding, showIcon ? baseInlinePadding * 0.75 : baseInlinePadding, closable ? baseInlinePadding * 0.75 : baseInlinePadding, prefixCls, hasTitle ? 600 : 400, prefixCls, prefixCls), hasTitle && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            .", "-alert-description {\n              line-height: 1.5;\n              word-break: normal;\n              opacity: 0.75;\n            }\n          "])), prefixCls))
   };
 });

package/es/Alert/type.d.ts

@@ -1,11 +1,12 @@
 import type { AlertProps as AntAlertProps } from 'antd';
 import type { AlertRef } from 'antd/lib/alert/Alert';
-import type { ReactNode, Ref } from 'react';
+import type { CSSProperties, ReactNode, Ref } from 'react';
 import type { IconProps } from "../Icon";
 export interface AlertProps extends Omit<AntAlertProps, 'icon' | 'type'> {
     classNames?: {
         alert?: string;
         container?: string;
+        extraContent?: string;
     };
     colorfulText?: boolean;
     extra?: ReactNode;
@@ -15,6 +16,11 @@ export interface AlertProps extends Omit<AntAlertProps, 'icon' | 'type'> {
     icon?: IconProps['icon'];
     iconProps?: Omit<IconProps, 'icon'>;
     ref?: Ref<AlertRef>;
+    styles?: {
+        alert?: CSSProperties;
+        container?: CSSProperties;
+        extraContent?: CSSProperties;
+    };
     text?: {
         detail?: string;
     };

package/package.json

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