@lobehub/ui 1.41.0 → 1.43.0

package/es/Form/components/FormItem.d.ts

@@ -3,6 +3,9 @@ import { FormItemProps as AntdFormItemProps } from 'antd';
 export interface FormItemProps extends AntdFormItemProps {
     desc?: string;
     divider?: boolean;
+    hidden?: boolean;
+    minWidth?: string | number;
+    tag?: string;
 }
 declare const FormItem: import("react").NamedExoticComponent<FormItemProps>;
 export default FormItem;

package/es/Form/components/FormItem.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["desc", "className", "label", "children", "divider"];
+var _excluded = ["desc", "tag", "minWidth", "className", "label", "children", "divider"];
 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 { Form } from 'antd';
@@ -14,21 +14,24 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var Item = Form.Item;
 var FormItem = /*#__PURE__*/memo(function (_ref) {
   var desc = _ref.desc,
+    tag = _ref.tag,
+    minWidth = _ref.minWidth,
     className = _ref.className,
     label = _ref.label,
     children = _ref.children,
     divider = _ref.divider,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(minWidth),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [divider && /*#__PURE__*/_jsx(FormDivider, {}), /*#__PURE__*/_jsx(Item, _objectSpread(_objectSpread({
       className: cx(styles.item, className),
-      label: desc ? /*#__PURE__*/_jsx(FormTitle, {
+      label: /*#__PURE__*/_jsx(FormTitle, {
         desc: desc,
+        tag: tag,
         title: String(label)
-      }) : label
+      })
     }, props), {}, {
       children: children
     }))]

package/es/Form/components/FormTitle.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { DivProps } from "../../types";
 export interface FormTitleProps extends DivProps {
-    desc: string;
+    desc?: string;
+    tag?: string;
     title: string;
 }
 declare const FormTitle: import("react").NamedExoticComponent<FormTitleProps>;

package/es/Form/components/FormTitle.js

@@ -1,9 +1,12 @@
+import { Tag } from 'antd';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var FormTitle = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
+    tag = _ref.tag,
     title = _ref.title,
     desc = _ref.desc;
   var _useStyles = useStyles(),
@@ -11,9 +14,14 @@ var FormTitle = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.formTitle, className),
-    children: [/*#__PURE__*/_jsx("div", {
-      children: title
-    }), /*#__PURE__*/_jsx("small", {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      direction: 'horizontal',
+      gap: 8,
+      children: [title, tag && /*#__PURE__*/_jsx(Tag, {
+        children: tag
+      })]
+    }), desc && /*#__PURE__*/_jsx("small", {
       children: desc
     })]
   });

package/es/Form/components/style.d.ts

@@ -1,7 +1,7 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: string | number | undefined) => import("antd-style").ReturnStyles<{
     footer: import("antd-style").SerializedStyles;
     formTitle: import("antd-style").SerializedStyles;
-    group: import("antd-style").SerializedStyles;
+    group: string;
     item: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/Form/components/style.js

@@ -1,14 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { isNumber } from 'lodash-es';
+export var useStyles = createStyles(function (_ref, itemMinWidth) {
   var css = _ref.css,
-    token = _ref.token;
+    cx = _ref.cx,
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   return {
-    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  "]))),
-    formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n\n    text-align: left;\n\n    > div {\n      font-weight: 500;\n      line-height: 1;\n    }\n\n    > small {\n      display: block;\n\n      line-height: 1.1;\n      color: ", ";\n      word-wrap: break-word;\n      white-space: pre-wrap;\n    }\n  "])), token.colorTextDescription),
-    group: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .ant-collapse-header {\n      background: ", ";\n      border-radius: 0 !important;\n    }\n\n    .ant-collapse-content {\n      background: transparent;\n    }\n\n    .ant-collapse-content-box {\n      padding-top: 0 !important;\n      padding-bottom: 0 !important;\n    }\n  "])), token.colorFillTertiary),
-    item: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 8px 0;\n\n    .ant-row {\n      justify-content: space-between;\n\n      > div {\n        flex: unset !important;\n        flex-grow: unset !important;\n      }\n    }\n  "]))),
-    title: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    align-items: center;\n\n    font-size: 16px;\n    font-weight: 600;\n\n    .anticon {\n      color: ", ";\n    }\n  "])), token.colorPrimary)
+    footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    "]))),
+    formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .ant-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, token.fontFamilyCode),
+    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
+    item: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
+    title: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
   };
 });

package/es/Form/index.d.ts

@@ -1,4 +1,4 @@
-import { FormProps as AntFormProps } from 'antd';
+import { FormProps as AntFormProps, type FormInstance } from 'antd';
 import { LucideIcon } from 'lucide-react';
 import { type ReactNode } from 'react';
 import { FormItemProps } from './components/FormItem';
@@ -10,7 +10,8 @@ export interface ItemGroup {
 export interface FormProps extends AntFormProps {
     children?: ReactNode;
     footer?: ReactNode;
+    itemMinWidth?: FormItemProps['minWidth'];
     items?: ItemGroup[];
 }
-declare const Form: import("react").NamedExoticComponent<FormProps>;
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<FormInstance<any>>>;
 export default Form;

package/es/Form/index.js

@@ -1,18 +1,19 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "footer", "items", "children"];
+var _excluded = ["className", "itemMinWidth", "footer", "items", "children"];
 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 { Form as AntForm } from 'antd';
-import { memo } from 'react';
+import { forwardRef } from 'react';
 import FormFooter from "./components/FormFooter";
 import FormGroup from "./components/FormGroup";
 import FormItem from "./components/FormItem";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Form = /*#__PURE__*/memo(function (_ref) {
+var Form = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
+    itemMinWidth = _ref.itemMinWidth,
     footer = _ref.footer,
     items = _ref.items,
     children = _ref.children,
@@ -23,15 +24,19 @@ var Form = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
     className: cx(styles.form, className),
     colon: false,
-    layout: "horizontal"
+    layout: "horizontal",
+    ref: ref
   }, props), {}, {
     children: [items === null || items === void 0 ? void 0 : items.map(function (group, groupIndex) {
       return /*#__PURE__*/_jsx(FormGroup, {
         icon: group === null || group === void 0 ? void 0 : group.icon,
         title: group.title,
-        children: group.children.map(function (item, itemIndex) {
+        children: group.children.filter(function (item) {
+          return !item.hidden;
+        }).map(function (item, itemIndex) {
           return /*#__PURE__*/_jsx(FormItem, _objectSpread({
-            divider: itemIndex !== 0
+            divider: itemIndex !== 0,
+            minWidth: itemMinWidth
           }, item), itemIndex);
         })
       }, groupIndex);

package/es/Form/style.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css;
+  var css = _ref.css,
+    token = _ref.token;
   return {
     footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n  "]))),
-    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    .ant-form-item {\n      margin: 0 !important;\n    }\n\n    .ant-form-item .ant-form-item-label > label {\n      height: unset;\n    }\n\n    .ant-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .ant-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .ant-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n  "])))
+    form: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    .ant-form-item {\n      margin: 0 !important;\n    }\n\n    .ant-form-item .ant-form-item-label > label {\n      height: unset;\n    }\n\n    .ant-row {\n      position: relative;\n      flex-wrap: nowrap;\n    }\n\n    .ant-form-item-label {\n      position: relative;\n      flex: 1;\n      max-width: 100%;\n    }\n\n    .ant-form-item-control {\n      position: relative;\n      flex: 0;\n      min-width: unset !important;\n    }\n\n    .ant-collapse-item {\n      overflow: hidden !important;\n      border-radius: ", "px !important;\n    }\n  "])), token.borderRadius)
   };
 });

package/es/SideNav/index.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "avatar", "topActions", "bottomActions"];
 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 { Space } from 'antd';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,20 +20,20 @@ var SideNav = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles, className)
   }, props), {}, {
-    children: [/*#__PURE__*/_jsxs(Space, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
       align: "center",
       direction: "vertical",
-      size: 16,
-      children: [avatar, /*#__PURE__*/_jsx(Space, {
+      gap: 16,
+      children: [avatar, /*#__PURE__*/_jsx(Flexbox, {
         align: "center",
         direction: "vertical",
-        size: 8,
+        gap: 8,
         children: topActions
       })]
-    }), /*#__PURE__*/_jsx(Space, {
+    }), /*#__PURE__*/_jsx(Flexbox, {
       align: "center",
       direction: "vertical",
-      size: 4,
+      gap: 4,
       children: bottomActions
     })]
   }));

package/es/Swatches/style.js

@@ -5,7 +5,7 @@ export var useStyles = createStyles(function (_ref, size) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: inset 0 0 0 2px ", ";\n    "])), token.colorText),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 1px ", ";\n\n      transition: scale 400ms ", ";\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorFill, token.motionEaseOut)
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: 0 0 0 2px ", ";\n    "])), token.colorTextTertiary),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: 0 0 0 1px ", ";\n\n      transition:\n        scale 400ms ", ",\n        box-shadow 100ms ", ";\n\n      &:hover {\n        box-shadow: 0 0 0 3px ", ";\n      }\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorBorderSecondary, token.motionEaseOut, token.motionEaseOut, token.colorText)
   };
 });

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -2,5 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 var _templateObject;
 import { css } from 'antd-style';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", ";\n\n    background-color: ", ";\n    border-radius: ", "px;\n  }\n\n  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", ";\n    }\n  }\n"])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .ant-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .ant-switch-handle::before {\n    background: ", " !important;\n  }\n"])), token.colorBgLayout, token.colorText, token.borderRadiusSM, token.colorText, token.colorBgContainer);
 });

package/es/ThemeSwitch/index.d.ts

@@ -3,6 +3,11 @@ import { type ActionIconSize } from "..";
 import { ThemeMode } from 'antd-style';
 import { DivProps } from "../types";
 export interface ThemeSwitchProps extends DivProps {
+    labels?: {
+        auto: string;
+        dark: string;
+        light: string;
+    };
     /**
      * @description Callback function when the theme mode is switched
      * @type {(themeMode: ThemeMode) => void}
@@ -22,6 +27,7 @@ export interface ThemeSwitchProps extends DivProps {
      * @type ThemeMode
      */
     themeMode: ThemeMode;
+    type?: 'icon' | 'select';
 }
 declare const ThemeSwitch: import("react").NamedExoticComponent<ThemeSwitchProps>;
 export default ThemeSwitch;

package/es/ThemeSwitch/index.js

@@ -1,60 +1,88 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["size", "themeMode", "onThemeSwitch"];
-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, Icon } from "./..";
-import { Dropdown } from 'antd';
+import { Dropdown, Select } from 'antd';
 import { Monitor, Moon, Sun } from 'lucide-react';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var icons = {
   auto: Monitor,
   dark: Moon,
   light: Sun
 };
-var items = [{
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: icons.auto,
-    size: "small"
-  }),
-  key: 'auto',
-  label: 'System'
-}, {
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: icons.light,
-    size: "small"
-  }),
-  key: 'light',
-  label: 'Light'
-}, {
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: icons.dark,
-    size: "small"
-  }),
-  key: 'dark',
-  label: 'Dark'
-}];
 var ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'site' : _ref$size,
     themeMode = _ref.themeMode,
     onThemeSwitch = _ref.onThemeSwitch,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var menuProps = {
-    items: items,
-    onClick: function onClick(e) {
-      return onThemeSwitch(e.key);
-    }
-  };
-  return /*#__PURE__*/_jsx(Dropdown, _objectSpread(_objectSpread({
-    menu: menuProps,
-    trigger: ['click']
-  }, props), {}, {
-    children: /*#__PURE__*/_jsx(ActionIcon, {
-      icon: icons[themeMode],
-      size: size
-    })
-  }));
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'icon' : _ref$type,
+    _ref$labels = _ref.labels,
+    labels = _ref$labels === void 0 ? {
+      auto: 'System',
+      dark: 'Dark',
+      light: 'Light'
+    } : _ref$labels,
+    className = _ref.className,
+    style = _ref.style;
+  var items = useMemo(function () {
+    return [{
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: icons.auto,
+        size: "small"
+      }),
+      key: 'auto',
+      label: labels.auto
+    }, {
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: icons.light,
+        size: "small"
+      }),
+      key: 'light',
+      label: labels.light
+    }, {
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: icons.dark,
+        size: "small"
+      }),
+      key: 'dark',
+      label: labels.dark
+    }];
+  }, [labels]);
+  if (type === 'select') {
+    return /*#__PURE__*/_jsx(Select, {
+      className: className,
+      defaultValue: themeMode,
+      onChange: onThemeSwitch,
+      options: items.map(function (item) {
+        return {
+          label: /*#__PURE__*/_jsxs(Flexbox, {
+            direction: 'horizontal',
+            gap: 8,
+            children: [item.icon, item.label]
+          }),
+          value: item.key
+        };
+      }),
+      style: style
+    });
+  } else {
+    var menuProps = {
+      items: items,
+      onClick: function onClick(e) {
+        return onThemeSwitch(e.key);
+      }
+    };
+    return /*#__PURE__*/_jsx(Dropdown, {
+      menu: menuProps,
+      trigger: ['click'],
+      children: /*#__PURE__*/_jsx(ActionIcon, {
+        className: className,
+        icon: icons[themeMode],
+        size: size,
+        style: style
+      })
+    });
+  }
 });
 export default ThemeSwitch;

package/es/index.d.ts

@@ -47,7 +47,7 @@ export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as Spotlight, type SpotlightProps } from './Spotlight';
 export { default as StroyBook, type StroyBookProps, useControls, useCreateStore, } from './StroyBook';
-export { colorScales as colors } from './styles/colors';
+export * from './styles';
 export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';

package/es/index.js

@@ -46,7 +46,7 @@ export { default as SideNav } from "./SideNav";
 export { default as Snippet } from "./Snippet";
 export { default as Spotlight } from "./Spotlight";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
-export { colorScales as colors } from "./styles/colors";
+export * from "./styles";
 export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";

package/es/styles/algorithms/generateColorPalette.js

@@ -6,7 +6,8 @@ export var generateColorPalette = function generateColorPalette(_ref) {
     scale = _ref.scale,
     appearance = _ref.appearance;
   var name = capitalize(type);
-  return _ref2 = {}, _defineProperty(_ref2, "color".concat(name, "Bg"), scale[appearance][1]), _defineProperty(_ref2, "color".concat(name, "BgHover"), scale[appearance][2]), _defineProperty(_ref2, "color".concat(name, "Border"), scale[appearance][4]), _defineProperty(_ref2, "color".concat(name, "BorderHover"), scale[appearance][5]), _defineProperty(_ref2, "color".concat(name, "Hover"), scale[appearance][10]), _defineProperty(_ref2, "color".concat(name), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "Active"), scale[appearance][7]), _defineProperty(_ref2, "color".concat(name, "TextHover"), scale[appearance][10]), _defineProperty(_ref2, "color".concat(name, "Text"), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "TextActive"), scale[appearance][7]), _ref2;
+  var isDarkMode = appearance === 'dark';
+  return _ref2 = {}, _defineProperty(_ref2, "color".concat(name, "Bg"), scale[appearance][1]), _defineProperty(_ref2, "color".concat(name, "BgHover"), scale[appearance][2]), _defineProperty(_ref2, "color".concat(name, "Border"), scale[appearance][4]), _defineProperty(_ref2, "color".concat(name, "BorderHover"), scale[appearance][isDarkMode ? 5 : 3]), _defineProperty(_ref2, "color".concat(name, "Hover"), scale[appearance][isDarkMode ? 10 : 8]), _defineProperty(_ref2, "color".concat(name), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "Active"), scale[appearance][isDarkMode ? 7 : 10]), _defineProperty(_ref2, "color".concat(name, "TextHover"), scale[appearance][isDarkMode ? 10 : 8]), _defineProperty(_ref2, "color".concat(name, "Text"), scale[appearance][9]), _defineProperty(_ref2, "color".concat(name, "TextActive"), scale[appearance][isDarkMode ? 7 : 10]), _ref2;
 };
 export var generateColorNeutralPalette = function generateColorNeutralPalette(_ref3) {
   var scale = _ref3.scale,

package/es/styles/algorithms/generateCustomTheme.d.ts

@@ -0,0 +1,9 @@
+import { AliasToken } from 'antd/es/theme/interface';
+import { type NeutralColors, type PrimaryColors } from '../customTheme';
+interface generateCustomThemeProps {
+    isDarkMode: boolean;
+    neutralColor?: NeutralColors | '';
+    primaryColor?: PrimaryColors | '';
+}
+export declare const generateCustomTheme: ({ primaryColor, neutralColor, isDarkMode, }: generateCustomThemeProps) => Partial<AliasToken>;
+export {};

package/es/styles/algorithms/generateCustomTheme.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { colorScales } from "../colors";
+import { neutralColorScales } from "../neutralColors";
+import { generateColorNeutralPalette, generateColorPalette } from "./generateColorPalette";
+export var generateCustomTheme = function generateCustomTheme(_ref) {
+  var primaryColor = _ref.primaryColor,
+    neutralColor = _ref.neutralColor,
+    isDarkMode = _ref.isDarkMode;
+  var appearance = isDarkMode ? 'dark' : 'light';
+  var primaryTokens = {};
+  var neutralTokens = {};
+  if (primaryColor) {
+    var scale = colorScales[primaryColor];
+    primaryTokens = generateColorPalette({
+      appearance: appearance,
+      scale: scale,
+      type: 'Primary'
+    });
+  }
+  if (neutralColor) {
+    var _scale = neutralColorScales[neutralColor];
+    neutralTokens = generateColorNeutralPalette({
+      appearance: appearance,
+      scale: _scale
+    });
+  }
+  return _objectSpread(_objectSpread({}, primaryTokens), neutralTokens);
+};

package/es/styles/customTheme.d.ts

@@ -0,0 +1,28 @@
+export declare const primaryColors: {
+    blue: string;
+    cyan: string;
+    geekblue: string;
+    gold: string;
+    green: string;
+    lime: string;
+    magenta: string;
+    orange: string;
+    purple: string;
+    red: string;
+    volcano: string;
+    yellow: string;
+};
+export declare type PrimaryColorsObj = typeof primaryColors;
+export declare type PrimaryColors = keyof PrimaryColorsObj;
+export declare const primaryColorsSwatches: string[];
+export declare const neutralColors: {
+    mauve: string;
+    olive: string;
+    sage: string;
+    sand: string;
+    slate: string;
+};
+export declare const neutralColorsSwatches: string[];
+export declare type NeutralColorsObj = typeof neutralColors;
+export declare type NeutralColors = keyof NeutralColorsObj;
+export declare const findCustomThemeName: (type: 'primary' | 'neutral', value: string) => string | undefined;

package/es/styles/customTheme.js

@@ -0,0 +1,32 @@
+import { colorScales } from "./colors";
+import { neutralColorScales } from "./neutralColors";
+export var primaryColors = {
+  blue: colorScales.blue.dark[9],
+  cyan: colorScales.cyan.dark[9],
+  geekblue: colorScales.geekblue.dark[9],
+  gold: colorScales.gold.dark[9],
+  green: colorScales.green.dark[9],
+  lime: colorScales.lime.dark[9],
+  magenta: colorScales.magenta.dark[9],
+  orange: colorScales.orange.dark[9],
+  purple: colorScales.purple.dark[9],
+  red: colorScales.red.dark[9],
+  volcano: colorScales.volcano.dark[9],
+  yellow: colorScales.yellow.dark[9]
+};
+export var primaryColorsSwatches = [primaryColors.red, primaryColors.orange, primaryColors.gold, primaryColors.yellow, primaryColors.lime, primaryColors.green, primaryColors.cyan, primaryColors.blue, primaryColors.geekblue, primaryColors.purple, primaryColors.magenta, primaryColors.volcano];
+export var neutralColors = {
+  mauve: neutralColorScales.mauve.dark[9],
+  olive: neutralColorScales.olive.dark[9],
+  sage: neutralColorScales.sage.dark[9],
+  sand: neutralColorScales.sand.dark[9],
+  slate: neutralColorScales.slate.dark[9]
+};
+export var neutralColorsSwatches = [neutralColors.mauve, neutralColors.slate, neutralColors.sage, neutralColors.olive, neutralColors.sand];
+export var findCustomThemeName = function findCustomThemeName(type, value) {
+  var res = type === 'primary' ? primaryColors : neutralColors;
+  var result = Object.entries(res).find(function (item) {
+    return item[1] === value;
+  });
+  return result === null || result === void 0 ? void 0 : result[0];
+};

package/es/styles/index.d.ts

@@ -1,3 +1,6 @@
 export { generateCustomStylish as lobeCustomStylish } from './algorithms/generateCustomStylish';
+export { generateCustomTheme as lobeCustomTheme } from './algorithms/generateCustomTheme';
 export { generateCustomToken as lobeCustomToken } from './algorithms/generateCustomToken';
 export { generateTheme as lobeTheme } from './algorithms/generateTheme';
+export { colorScales as colors } from './colors';
+export * from './customTheme';

package/es/styles/index.js

@@ -1,3 +1,6 @@
 export { generateCustomStylish as lobeCustomStylish } from "./algorithms/generateCustomStylish";
+export { generateCustomTheme as lobeCustomTheme } from "./algorithms/generateCustomTheme";
 export { generateCustomToken as lobeCustomToken } from "./algorithms/generateCustomToken";
-export { generateTheme as lobeTheme } from "./algorithms/generateTheme";
+export { generateTheme as lobeTheme } from "./algorithms/generateTheme";
+export { colorScales as colors } from "./colors";
+export * from "./customTheme";

package/es/styles/neutralColors.d.ts

@@ -0,0 +1,9 @@
+import type { ColorScaleItem } from './colors';
+export interface NeutralColorScales {
+    mauve: ColorScaleItem;
+    olive: ColorScaleItem;
+    sage: ColorScaleItem;
+    sand: ColorScaleItem;
+    slate: ColorScaleItem;
+}
+export declare const neutralColorScales: NeutralColorScales;

package/es/styles/neutralColors.js

@@ -0,0 +1,32 @@
+export var neutralColorScales = {
+  mauve: {
+    dark: ['#1c1b1e', '#252528', '#2f2f32', '#3a393d', '#454448', '#504f53', '#5b5a5f', '#67666a', '#737177', '#7f7d83', '#bbb9bd', '#fcf8fb', '#ffffff'],
+    darkA: ['rgba(233, 225, 250, 0.12)', 'rgba(231, 231, 250, 0.16)', 'rgba(235, 235, 250, 0.2)', 'rgba(242, 237, 254, 0.24)', 'rgba(238, 234, 248, 0.29)', 'rgba(242, 239, 252, 0.33)', 'rgba(239, 237, 250, 0.38)', 'rgba(245, 243, 252, 0.42)', 'rgba(245, 240, 253, 0.47)', 'rgba(244, 240, 252, 0.52)', 'rgba(253, 250, 255, 0.74)', 'rgba(255, 251, 254, 0.99)', '#ffffff'],
+    light: ['#fcf8fb', '#edeaed', '#dfdcdf', '#d1ced2', '#c2c0c4', '#b4b2b7', '#a7a4a9', '#99979c', '#8c8a90', '#7f7d83', '#4a494d', '#1c1b1e', '#111'],
+    lightA: ['rgba(155, 22, 122, 0.03)', 'rgba(55, 22, 55, 0.09)', 'rgba(26, 5, 26, 0.14)', 'rgba(25, 10, 30, 0.2)', 'rgba(11, 3, 19, 0.25)', 'rgba(13, 7, 23, 0.31)', 'rgba(11, 2, 16, 0.36)', 'rgba(6, 1, 14, 0.41)', 'rgba(5, 1, 14, 0.46)', 'rgba(4, 0, 12, 0.51)', 'rgba(4, 2, 8, 0.72)', 'rgba(3, 2, 5, 0.9)', '#111']
+  },
+  olive: {
+    dark: ['#1a1c1b', '#232624', '#2d302e', '#383a38', '#424542', '#4d504d', '#585c58', '#646763', '#70736e', '#7c7f79', '#b9bab5', '#faf9f4', '#ffffff'],
+    darkA: ['rgba(236, 255, 245, 0.11)', 'rgba(233, 253, 240, 0.15)', 'rgba(237, 253, 242, 0.19)', 'rgba(243, 252, 243, 0.23)', 'rgba(236, 246, 236, 0.28)', 'rgba(241, 250, 241, 0.32)', 'rgba(238, 249, 238, 0.37)', 'rgba(244, 251, 241, 0.41)', 'rgba(243, 250, 239, 0.46)', 'rgba(248, 254, 242, 0.5)', 'rgba(253, 255, 248, 0.73)', 'rgba(255, 254, 249, 0.98)', '#ffffff'],
+    light: ['#faf9f4', '#ecebe6', '#ddddd7', '#cfcfc9', '#c0c1bb', '#b2b4ae', '#a4a6a0', '#969993', '#898c86', '#7c7f79', '#484b48', '#1a1c1b', '#111'],
+    lightA: ['rgba(155, 135, 35, 0.05)', 'rgba(65, 55, 5, 0.1)', 'rgba(43, 43, 5, 0.16)', 'rgba(37, 37, 10, 0.22)', 'rgba(22, 25, 3, 0.27)', 'rgba(14, 21, 2, 0.32)', 'rgba(16, 21, 5, 0.38)', 'rgba(11, 18, 4, 0.43)', 'rgba(9, 15, 3, 0.48)', 'rgba(8, 13, 2, 0.53)', 'rgba(1, 5, 1, 0.72)', 'rgba(1, 3, 2, 0.9)', '#111']
+  },
+  sage: {
+    dark: ['#1a1c1b', '#232625', '#2d302f', '#373a39', '#424543', '#4d504e', '#585c59', '#636765', '#6f7370', '#7a7f7c', '#b8bab7', '#f9f9f7', '#ffffff'],
+    darkA: ['rgba(236, 255, 245, 0.11)', 'rgba(233, 253, 247, 0.15)', 'rgba(237, 253, 247, 0.19)', 'rgba(239, 252, 248, 0.23)', 'rgba(236, 246, 239, 0.28)', 'rgba(241, 250, 244, 0.32)', 'rgba(238, 249, 241, 0.37)', 'rgba(241, 251, 246, 0.41)', 'rgba(241, 250, 243, 0.46)', 'rgba(244, 254, 248, 0.5)', 'rgba(252, 255, 251, 0.73)', 'rgba(254, 254, 252, 0.98)', '#ffffff'],
+    light: ['#f9f9f7', '#eaebe8', '#dcddda', '#cdcfcc', '#bfc1be', '#b1b4b0', '#a3a6a3', '#959996', '#888c89', '#7a7f7c', '#474b49', '#1a1c1b', '#111'],
+    lightA: ['rgba(105, 105, 55, 0.04)', 'rgba(45, 55, 25, 0.1)', 'rgba(22, 28, 8, 0.15)', 'rgba(5, 15, 0, 0.2)', 'rgba(9, 17, 5, 0.26)', 'rgba(3, 13, 0, 0.31)', 'rgba(6, 14, 6, 0.37)', 'rgba(3, 12, 5, 0.42)', 'rgba(2, 10, 4, 0.47)', 'rgba(4, 13, 8, 0.53)', 'rgba(3, 8, 6, 0.73)', 'rgba(1, 3, 2, 0.9)', '#111']
+  },
+  sand: {
+    dark: ['#1c1c18', '#262521', '#30302b', '#3a3a35', '#45453f', '#505049', '#5c5b54', '#67675f', '#73726a', '#7f7e76', '#bcbab2', '#fcf9f3', '#ffffff'],
+    darkA: ['rgba(255, 255, 218, 0.11)', 'rgba(253, 247, 220, 0.15)', 'rgba(253, 253, 226, 0.19)', 'rgba(252, 252, 230, 0.23)', 'rgba(246, 246, 225, 0.28)', 'rgba(250, 250, 228, 0.32)', 'rgba(249, 246, 227, 0.37)', 'rgba(251, 251, 232, 0.41)', 'rgba(250, 248, 230, 0.46)', 'rgba(254, 252, 236, 0.5)', 'rgba(254, 251, 241, 0.74)', 'rgba(255, 252, 245, 0.99)', '#ffffff'],
+    light: ['#fcf9f3', '#edebe4', '#dfddd5', '#d1cfc7', '#c3c1b9', '#b5b3ab', '#a7a69d', '#999890', '#8c8b83', '#7f7e76', '#4b4a44', '#1c1c18', '#111'],
+    lightA: ['rgba(195, 135, 15, 0.05)', 'rgba(91, 73, 10, 0.11)', 'rgba(67, 55, 8, 0.17)', 'rgba(46, 37, 0, 0.22)', 'rgba(41, 34, 5, 0.28)', 'rgba(31, 25, 0, 0.33)', 'rgba(29, 27, 4, 0.39)', 'rgba(23, 21, 3, 0.44)', 'rgba(20, 18, 2, 0.49)', 'rgba(18, 16, 1, 0.54)', 'rgba(12, 10, 2, 0.74)', 'rgba(6, 6, 1, 0.91)', '#111']
+  },
+  slate: {
+    dark: ['#1b1c1d', '#242527', '#2e2f32', '#383a3c', '#434547', '#4e5052', '#595b5e', '#64676a', '#707276', '#7b7e82', '#b8babc', '#f9f9fa', '#ffffff'],
+    darkA: ['rgba(225, 233, 242, 0.12)', 'rgba(225, 231, 244, 0.16)', 'rgba(230, 235, 250, 0.2)', 'rgba(233, 242, 250, 0.24)', 'rgba(239, 246, 254, 0.28)', 'rgba(236, 242, 248, 0.33)', 'rgba(241, 246, 254, 0.37)', 'rgba(238, 245, 252, 0.42)', 'rgba(238, 243, 251, 0.47)', 'rgba(241, 247, 255, 0.51)', 'rgba(249, 251, 254, 0.74)', 'rgba(254, 254, 255, 0.98)', '#ffffff'],
+    light: ['#f9f9fa', '#ebebec', '#dcddde', '#cecfd0', '#bfc1c3', '#b1b3b5', '#a4a6a8', '#96989b', '#898b8e', '#7b7e82', '#484a4d', '#1b1c1d', '#111'],
+    lightA: ['rgba(55, 55, 88, 0.03)', 'rgba(5, 5, 17, 0.08)', 'rgba(5, 12, 19, 0.14)', 'rgba(10, 15, 20, 0.2)', 'rgba(9, 17, 24, 0.26)', 'rgba(3, 10, 16, 0.31)', 'rgba(2, 8, 13, 0.36)', 'rgba(5, 10, 17, 0.42)', 'rgba(4, 8, 15, 0.47)', 'rgba(1, 7, 15, 0.52)', 'rgba(1, 4, 8, 0.72)', 'rgba(2, 3, 4, 0.9)', '#111']
+  }
+};

package/package.json

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