@lobehub/ui 1.170.8 → 2.0.0

package/es/Tag/utils.js

@@ -0,0 +1,15 @@
+import { camelCase } from 'lodash-es';
+export var presetColors = ['red', 'volcano', 'orange', 'gold', 'yellow', 'lime', 'green', 'cyan', 'blue', 'geekblue', 'purple', 'magenta', 'gray'];
+export var presetSystemColors = new Set(['error', 'warning', 'success', 'info']);
+export var colorsPreset = function colorsPreset(theme, type) {
+  for (var _len = arguments.length, keys = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    keys[_key - 2] = arguments[_key];
+  }
+  return theme[camelCase([type].concat(keys).join('-'))];
+};
+export var colorsPresetSystem = function colorsPresetSystem(theme, type) {
+  for (var _len2 = arguments.length, keys = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    keys[_key2 - 2] = arguments[_key2];
+  }
+  return theme[camelCase(['color', type].concat(keys).join('-'))];
+};

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -4,5 +4,5 @@ import { css } from 'antd-style';
 import { readableColor, rgba } from 'polished';
 export default (function (token) {
   var readColor = readableColor(token.colorPrimary);
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .", "-checkbox-inner:after {\n      border-color: ", " !important;\n    }\n\n    .", "-btn {\n      box-shadow: none;\n    }\n\n    .", "-btn-primary:not(:disabled) {\n      color: ", " !important;\n\n      &:hover {\n        color: ", " !important;\n      }\n\n      &:active {\n        color: ", " !important;\n      }\n    }\n\n    .", "-tooltip-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding-block: 4px;\n      padding-inline: 8px;\n\n      color: ", " !important;\n\n      background-color: ", " !important;\n      border-radius: ", "px !important;\n    }\n\n    .", "-tooltip-arrow {\n      &::before,\n      &::after {\n        background: ", " !important;\n      }\n    }\n\n    .", "-switch-handle::before {\n      background: ", " !important;\n    }\n\n    .", "-image-preview-close,\n      .", "-image-preview-switch-right,\n      .", "-image-preview-switch-left {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      ", ";\n    }\n\n    .", "-popover-inner {\n      border: 1px solid ", ";\n      box-shadow: ", ";\n    }\n\n    ul.", "-dropdown-menu {\n      border: 1px solid ", ";\n      border-radius: ", "px !important;\n      box-shadow: ", ";\n    }\n\n    .", "-radio-wrapper\n      .", "-radio-checked\n      .", "-radio-inner:after {\n      background: ", ";\n    }\n  "])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readColor, readColor, readColor, token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, rgba(token.colorBgMask, 0.1), token.borderRadiusLG, token.stylish.blur, token.prefixCls, token.colorBorderSecondary, token.boxShadowSecondary, token.prefixCls, token.colorBorderSecondary, token.borderRadius, token.boxShadowSecondary, token.prefixCls, token.prefixCls, token.prefixCls, readColor);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .", "-checkbox-inner:after {\n      border-color: ", " !important;\n    }\n\n    .", "-btn {\n      box-shadow: none;\n    }\n\n    .", "-btn-primary:not(:disabled) {\n      color: ", " !important;\n\n      &:hover {\n        color: ", " !important;\n      }\n\n      &:active {\n        color: ", " !important;\n      }\n    }\n\n    .", "-tooltip-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding-block: 4px;\n      padding-inline: 8px;\n\n      color: ", " !important;\n\n      background-color: ", " !important;\n      border-radius: ", "px !important;\n    }\n\n    .", "-tooltip-arrow {\n      &::before,\n      &::after {\n        background: ", " !important;\n      }\n    }\n\n    .", "-switch-handle::before {\n      background: ", " !important;\n    }\n\n    .", "-image-preview-close,\n      .", "-image-preview-switch-right,\n      .", "-image-preview-switch-left {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      ", ";\n    }\n\n    .", "-popover-inner,\n      .", "-dropdown-menu,\n      .", "-select-dropdown {\n      border-radius: ", "px !important;\n      box-shadow:\n        0 0 0 1px ", ",\n        ", " !important;\n    }\n\n    .", "-modal-content {\n      border: 1px solid ", " !important;\n    }\n\n    .", "-radio-wrapper\n      .", "-radio-checked\n      .", "-radio-inner:after {\n      background: ", ";\n    }\n  "])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.prefixCls, readColor, readColor, readColor, token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, rgba(token.colorBgMask, 0.1), token.borderRadiusLG, token.stylish.blur, token.prefixCls, token.prefixCls, token.prefixCls, token.borderRadius, token.colorFillTertiary, token.boxShadowSecondary, token.prefixCls, token.colorBorderSecondary, token.prefixCls, token.prefixCls, token.prefixCls, readColor);
 });

package/es/ThemeProvider/Meta.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-export interface MetaProps {
-    description?: string;
-    title?: string;
-    withManifest?: boolean;
-}
+import type { MetaProps } from './type';
 declare const Meta: import("react").NamedExoticComponent<MetaProps>;
 export default Meta;

package/es/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ThemeProviderProps } from './type';
+declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
+export default ThemeProvider;

package/es/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,91 @@
+'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 = ["children", "customStylish", "customToken", "enableCustomFonts", "enableGlobalStyle", "customFonts", "customTheme", "className", "style", "theme"];
+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 _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 { App } from 'antd';
+import { ThemeProvider as AntdThemeProvider } from 'antd-style';
+import { merge } from 'lodash-es';
+import { memo, useCallback, useMemo } from 'react';
+import { useCdnFn } from "../ConfigProvider";
+import FontLoader from "../FontLoader";
+import { lobeCustomStylish, lobeCustomToken } from "../styles";
+import { createLobeAntdTheme } from "../styles/theme/antdTheme";
+import GlobalStyle from "./GlobalStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    customStylish = _ref.customStylish,
+    customToken = _ref.customToken,
+    _ref$enableCustomFont = _ref.enableCustomFonts,
+    enableCustomFonts = _ref$enableCustomFont === void 0 ? true : _ref$enableCustomFont,
+    _ref$enableGlobalStyl = _ref.enableGlobalStyle,
+    enableGlobalStyle = _ref$enableGlobalStyl === void 0 ? true : _ref$enableGlobalStyl,
+    customFonts = _ref.customFonts,
+    _ref$customTheme = _ref.customTheme,
+    customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme,
+    className = _ref.className,
+    style = _ref.style,
+    antdTheme = _ref.theme,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var genCdnUrl = useCdnFn();
+  var webfontUrls = useMemo(function () {
+    return customFonts || [genCdnUrl({
+      path: 'css/index.css',
+      pkg: '@lobehub/webfont-mono'
+    }), genCdnUrl({
+      path: 'css/index.css',
+      pkg: '@lobehub/webfont-harmony-sans'
+    }), genCdnUrl({
+      path: 'css/index.css',
+      pkg: '@lobehub/webfont-harmony-sans-sc'
+    }), genCdnUrl({
+      path: 'dist/katex.min.css',
+      pkg: 'katex'
+    })];
+  }, [customFonts, genCdnUrl]);
+  var stylish = useCallback(function (theme) {
+    return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), customStylish === null || customStylish === void 0 ? void 0 : customStylish(theme));
+  }, [customStylish]);
+  var token = useCallback(function (theme) {
+    return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), customToken === null || customToken === void 0 ? void 0 : customToken(theme));
+  }, [customToken]);
+  var theme = useCallback(function (appearance) {
+    var lobeTheme = createLobeAntdTheme({
+      appearance: appearance,
+      neutralColor: customTheme.neutralColor,
+      primaryColor: customTheme.primaryColor
+    });
+    return merge(lobeTheme, antdTheme);
+  }, [customTheme.primaryColor, customTheme.neutralColor, antdTheme]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [enableCustomFonts && (webfontUrls === null || webfontUrls === void 0 ? void 0 : webfontUrls.length) > 0 && webfontUrls.map(function (webfont) {
+      return /*#__PURE__*/_jsx(FontLoader, {
+        url: webfont
+      }, webfont);
+    }), /*#__PURE__*/_jsxs(AntdThemeProvider, _objectSpread(_objectSpread({
+      customStylish: stylish,
+      customToken: token,
+      theme: theme
+    }, rest), {}, {
+      children: [enableGlobalStyle && /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
+        className: className,
+        style: _objectSpread({
+          minHeight: 'inherit',
+          width: 'inherit'
+        }, style),
+        children: children
+      })]
+    }))]
+  });
+});
+ThemeProvider.displayName = 'LobeThemeProvider';
+export default ThemeProvider;

package/es/ThemeProvider/index.d.ts

@@ -1,28 +1,3 @@
-import { ThemeProviderProps as AntdThemeProviderProps, CustomStylishParams, CustomTokenParams } from 'antd-style';
-import { CSSProperties } from 'react';
-import { NeutralColors, PrimaryColors } from "../styles";
-export interface ThemeProviderProps extends AntdThemeProviderProps<any> {
-    className?: string;
-    /**
-     * @description Webfont loader css strings
-     */
-    customFonts?: string[];
-    customStylish?: (theme: CustomStylishParams) => {
-        [key: string]: any;
-    };
-    customTheme?: {
-        neutralColor?: NeutralColors;
-        primaryColor?: PrimaryColors;
-    };
-    /**
-     * @description Custom extra token
-     */
-    customToken?: (theme: CustomTokenParams) => {
-        [key: string]: any;
-    };
-    enableCustomFonts?: boolean;
-    enableGlobalStyle?: boolean;
-    style?: CSSProperties;
-}
-declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
-export default ThemeProvider;
+export { default as Meta } from './Meta';
+export { default } from './ThemeProvider';
+export type * from './type';

package/es/ThemeProvider/index.js

@@ -1,91 +1,2 @@
-'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 = ["children", "customStylish", "customToken", "enableCustomFonts", "enableGlobalStyle", "customFonts", "customTheme", "className", "style", "theme"];
-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 _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 { App } from 'antd';
-import { ThemeProvider as AntdThemeProvider } from 'antd-style';
-import { merge } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-import { useCdnFn } from "../ConfigProvider";
-import FontLoader from "../FontLoader";
-import { lobeCustomStylish, lobeCustomToken } from "../styles";
-import { createLobeAntdTheme } from "../styles/theme/antdTheme";
-import GlobalStyle from "./GlobalStyle";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
-  var children = _ref.children,
-    customStylish = _ref.customStylish,
-    customToken = _ref.customToken,
-    _ref$enableCustomFont = _ref.enableCustomFonts,
-    enableCustomFonts = _ref$enableCustomFont === void 0 ? true : _ref$enableCustomFont,
-    _ref$enableGlobalStyl = _ref.enableGlobalStyle,
-    enableGlobalStyle = _ref$enableGlobalStyl === void 0 ? true : _ref$enableGlobalStyl,
-    customFonts = _ref.customFonts,
-    _ref$customTheme = _ref.customTheme,
-    customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme,
-    className = _ref.className,
-    style = _ref.style,
-    antdTheme = _ref.theme,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var genCdnUrl = useCdnFn();
-  var webfontUrls = useMemo(function () {
-    return customFonts || [genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-mono'
-    }), genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-harmony-sans'
-    }), genCdnUrl({
-      path: 'css/index.css',
-      pkg: '@lobehub/webfont-harmony-sans-sc'
-    }), genCdnUrl({
-      path: 'dist/katex.min.css',
-      pkg: 'katex'
-    })];
-  }, [customFonts, genCdnUrl]);
-  var stylish = useCallback(function (theme) {
-    return _objectSpread(_objectSpread({}, lobeCustomStylish(theme)), customStylish === null || customStylish === void 0 ? void 0 : customStylish(theme));
-  }, [customStylish]);
-  var token = useCallback(function (theme) {
-    return _objectSpread(_objectSpread({}, lobeCustomToken(theme)), customToken === null || customToken === void 0 ? void 0 : customToken(theme));
-  }, [customToken]);
-  var theme = useCallback(function (appearance) {
-    var lobeTheme = createLobeAntdTheme({
-      appearance: appearance,
-      neutralColor: customTheme.neutralColor,
-      primaryColor: customTheme.primaryColor
-    });
-    return merge(lobeTheme, antdTheme);
-  }, [customTheme.primaryColor, customTheme.neutralColor, antdTheme]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [enableCustomFonts && (webfontUrls === null || webfontUrls === void 0 ? void 0 : webfontUrls.length) > 0 && webfontUrls.map(function (webfont) {
-      return /*#__PURE__*/_jsx(FontLoader, {
-        url: webfont
-      }, webfont);
-    }), /*#__PURE__*/_jsxs(AntdThemeProvider, _objectSpread(_objectSpread({
-      customStylish: stylish,
-      customToken: token,
-      theme: theme
-    }, rest), {}, {
-      children: [enableGlobalStyle && /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
-        className: className,
-        style: _objectSpread({
-          minHeight: 'inherit',
-          width: 'inherit'
-        }, style),
-        children: children
-      })]
-    }))]
-  });
-});
-ThemeProvider.displayName = 'LobeThemeProvider';
-export default ThemeProvider;
+export { default as Meta } from "./Meta";
+export { default } from "./ThemeProvider";

package/es/ThemeProvider/type.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeProviderProps as AntdThemeProviderProps, CustomStylishParams, CustomTokenParams } from 'antd-style';
+import type { CSSProperties } from 'react';
+import type { NeutralColors, PrimaryColors } from "../styles";
+export interface ThemeProviderProps extends AntdThemeProviderProps<any> {
+    className?: string;
+    customFonts?: string[];
+    customStylish?: (theme: CustomStylishParams) => {
+        [key: string]: any;
+    };
+    customTheme?: {
+        neutralColor?: NeutralColors;
+        primaryColor?: PrimaryColors;
+    };
+    customToken?: (theme: CustomTokenParams) => {
+        [key: string]: any;
+    };
+    enableCustomFonts?: boolean;
+    enableGlobalStyle?: boolean;
+    style?: CSSProperties;
+}
+export interface MetaProps {
+    description?: string;
+    title?: string;
+    withManifest?: boolean;
+}

package/es/ThemeProvider/type.js

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

package/es/ThemeSwitch/ThemeSwitch.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { ThemeSwitchProps } from './type';
+declare const ThemeSwitch: import("react").NamedExoticComponent<ThemeSwitchProps>;
+export default ThemeSwitch;

package/es/ThemeSwitch/ThemeSwitch.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { Select } from 'antd';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import Dropdown from "../Dropdown";
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_ICON_SET = {
+  auto: Monitor,
+  dark: Moon,
+  light: Sun
+};
+var ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    themeMode = _ref.themeMode,
+    onThemeSwitch = _ref.onThemeSwitch,
+    _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,
+    variant = _ref.variant,
+    style = _ref.style;
+  var items = useMemo(function () {
+    return [{
+      icon: DEFAULT_ICON_SET.auto,
+      key: 'auto',
+      label: labels.auto
+    }, {
+      icon: DEFAULT_ICON_SET.light,
+      key: 'light',
+      label: labels.light
+    }, {
+      icon: DEFAULT_ICON_SET.dark,
+      key: 'dark',
+      label: labels.dark
+    }];
+  }, [labels]);
+  return type === 'select' ? /*#__PURE__*/_jsx(Select, {
+    className: className,
+    defaultValue: themeMode,
+    onChange: onThemeSwitch,
+    options: items.map(function (item) {
+      return {
+        label: /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          gap: 8,
+          horizontal: true,
+          children: [/*#__PURE__*/_jsx(Icon, {
+            icon: item.icon
+          }), item.label]
+        }),
+        value: item.key
+      };
+    }),
+    style: style,
+    variant: variant
+  }) : /*#__PURE__*/_jsx(Dropdown, {
+    menu: {
+      items: items,
+      onClick: function onClick(e) {
+        return onThemeSwitch(e.key);
+      }
+    },
+    trigger: ['click'],
+    children: /*#__PURE__*/_jsx(ActionIcon, {
+      className: className,
+      icon: DEFAULT_ICON_SET[themeMode],
+      size: size,
+      style: style,
+      variant: variant
+    })
+  });
+});
+ThemeSwitch.displayName = 'ThemeSwitch';
+export default ThemeSwitch;

package/es/ThemeSwitch/index.d.ts

@@ -1,33 +1,2 @@
-/// <reference types="react" />
-import { ThemeMode } from 'antd-style';
-import { type ActionIconSize } from "../ActionIcon";
-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}
-     */
-    onThemeSwitch: (themeMode: ThemeMode) => void;
-    /**
-     * @description Size of the action icon
-     * @default {
-     *   blockSize: 34,
-     *   fontSize: 20,
-     *   strokeWidth: 1.5,
-     * }
-     */
-    size?: ActionIconSize;
-    /**
-     * @description The theme mode of the component
-     * @type ThemeMode
-     */
-    themeMode: ThemeMode;
-    type?: 'icon' | 'select';
-}
-declare const ThemeSwitch: import("react").NamedExoticComponent<ThemeSwitchProps>;
-export default ThemeSwitch;
+export { default } from './ThemeSwitch';
+export type * from './type';

package/es/ThemeSwitch/index.js

@@ -1,91 +1 @@
-'use client';
-
-import { Dropdown, Select } from 'antd';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { memo, useMemo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-import ActionIcon from "../ActionIcon";
-import Icon from "../Icon";
-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 ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
-  var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'site' : _ref$size,
-    themeMode = _ref.themeMode,
-    onThemeSwitch = _ref.onThemeSwitch,
-    _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;
+export { default } from "./ThemeSwitch";

package/es/ThemeSwitch/type.d.ts

@@ -0,0 +1,15 @@
+import type { ThemeMode } from 'antd-style';
+import type { ActionIconProps } from "../ActionIcon";
+import type { DivProps } from "../types";
+export interface ThemeSwitchProps extends DivProps {
+    labels?: {
+        auto: string;
+        dark: string;
+        light: string;
+    };
+    onThemeSwitch: (themeMode: ThemeMode) => void;
+    size?: ActionIconProps['size'];
+    themeMode: ThemeMode;
+    type?: 'icon' | 'select';
+    variant?: ActionIconProps['variant'];
+}

package/es/ThemeSwitch/type.js

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

package/es/Toc/Toc.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { TocProps } from './type';
+declare const Toc: import("react").NamedExoticComponent<TocProps>;
+export default Toc;

package/es/Toc/Toc.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { Anchor } from 'antd';
+import { memo } from 'react';
+import { default as TocMobile } from "./TocMobile";
+import { useStyles } from "./style";
+import { mapItems } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Toc = /*#__PURE__*/memo(function (_ref) {
+  var activeKey = _ref.activeKey,
+    items = _ref.items,
+    getContainer = _ref.getContainer,
+    isMobile = _ref.isMobile,
+    _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 64 : _ref$headerHeight,
+    _ref$tocWidth = _ref.tocWidth,
+    tocWidth = _ref$tocWidth === void 0 ? 176 : _ref$tocWidth;
+  var _useStyles = useStyles({
+      headerHeight: headerHeight,
+      tocWidth: tocWidth
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  if (isMobile) return /*#__PURE__*/_jsx(TocMobile, {
+    activeKey: activeKey,
+    getContainer: getContainer,
+    headerHeight: headerHeight,
+    items: items
+  });
+  return /*#__PURE__*/_jsxs("section", {
+    className: cx(styles.container, styles.anchor),
+    children: [/*#__PURE__*/_jsx("h4", {
+      children: "Table of Contents"
+    }), /*#__PURE__*/_jsx(Anchor, {
+      getContainer: getContainer,
+      items: mapItems(items),
+      targetOffset: headerHeight + 12
+    })]
+  });
+});
+Toc.displayName = 'Toc';
+export default Toc;

package/es/Toc/TocMobile.d.ts

@@ -1,57 +1,4 @@
 /// <reference types="react" />
-import { AnchorProps } from 'antd';
-export interface AnchorItem {
-    /**
-     * @description The children of the anchor item
-     */
-    children?: AnchorItem[];
-    /**
-     * @description The ID of the anchor item
-     */
-    id: string;
-    /**
-     * @description The title of the anchor item
-     */
-    title: string;
-}
-export interface TocMobileProps {
-    /**
-     * @description The active key of the TocMobile component
-     * @default undefined
-     */
-    activeKey?: string;
-    /**
-     * @description The function to get the container of the anchor
-     */
-    getContainer?: AnchorProps['getContainer'];
-    /**
-     * @description The height of the header
-     * @default 64
-     */
-    headerHeight?: number;
-    /**
-     * @description The array of anchor items to be displayed
-     */
-    items: AnchorItem[];
-    /**
-     * @description The function to be called when the active key changes
-     */
-    onChange?: (activeKey: string) => void;
-    /**
-     * @description The width of the toc
-     * @default 176
-     */
-    tocWidth?: number;
-}
-export declare const mapItems: (items: AnchorItem[]) => {
-    children: {
-        href: string;
-        key: string;
-        title: string;
-    }[] | undefined;
-    href: string;
-    key: string;
-    title: string;
-}[];
+import type { TocMobileProps } from './type';
 declare const TocMobile: import("react").NamedExoticComponent<TocMobileProps>;
 export default TocMobile;