@lobehub/ui 1.2.0 → 1.4.0

package/es/ThemeProvider/index.d.ts

@@ -1,10 +1,25 @@
 import { extractStaticStyle, type ThemeMode } from 'antd-style';
 import React from 'react';
 export interface ThemeProviderProps {
+    /**
+     * @description Custom tokens to be used in the theme
+     */
     token?: any;
+    /**
+     * @description The children of the ThemeProvider component
+     */
     children: React.ReactNode;
+    /**
+     * @description The mode of the theme (light or dark)
+     */
     themeMode?: ThemeMode;
+    /**
+     * @description Whether to inline the styles on server-side rendering or not
+     */
     ssrInline?: boolean;
+    /**
+     * @description Cache for the extracted static styles
+     */
     cache?: typeof extractStaticStyle.cache;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/es/ThemeSwitch/index.d.ts

@@ -1,7 +1,7 @@
-import { type ActionIconSize } from "../index";
-import { DivProps } from "../types";
+/// <reference types="react" />
+import { type ActionIconSize } from "..";
 import { ThemeMode } from 'antd-style';
-import React from 'react';
+import { DivProps } from "../types";
 export interface ThemeSwitchProps extends DivProps {
     /**
      * @description Size of the action icon
@@ -23,5 +23,5 @@ export interface ThemeSwitchProps extends DivProps {
      */
     onThemeSwitch: (themeMode: ThemeMode) => void;
 }
-declare const _default: React.NamedExoticComponent<ThemeSwitchProps>;
-export default _default;
+declare const ThemeSwitch: import("react").NamedExoticComponent<ThemeSwitchProps>;
+export default ThemeSwitch;

package/es/ThemeSwitch/index.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { ActionIcon, Icon } from "./..";
 import { Dropdown } from 'antd';
 import { Monitor, Moon, Sun } from 'lucide-react';
-import React from 'react';
+import { memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 var icons = {
   auto: Monitor,
@@ -35,13 +35,9 @@ var items = [{
   }),
   key: 'dark'
 }];
-var ThemeSwitch = function ThemeSwitch(_ref) {
+var ThemeSwitch = /*#__PURE__*/memo(function (_ref) {
   var _ref$size = _ref.size,
-    size = _ref$size === void 0 ? {
-      blockSize: 34,
-      fontSize: 20,
-      strokeWidth: 1.5
-    } : _ref$size,
+    size = _ref$size === void 0 ? 'site' : _ref$size,
     themeMode = _ref.themeMode,
     onThemeSwitch = _ref.onThemeSwitch,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -60,5 +56,5 @@ var ThemeSwitch = function ThemeSwitch(_ref) {
       icon: icons[themeMode]
     })
   }));
-};
-export default /*#__PURE__*/React.memo(ThemeSwitch);
+});
+export default ThemeSwitch;

package/es/Tooltip/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TooltipProps as AntdTooltipProps } from 'antd';
+export declare type TooltipProps = AntdTooltipProps;
+declare const Tooltip: import("react").NamedExoticComponent<AntdTooltipProps>;
+export default Tooltip;

package/es/Tooltip/index.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className"];
+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 { Tooltip as AntdTooltip } from 'antd';
+import { memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Tooltip = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread({
+    overlayClassName: cx(styles.tooltip, className)
+  }, props));
+});
+export default Tooltip;

package/es/Tooltip/style.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    tooltip: import("antd-style").SerializedStyles;
+}>;

package/es/Tooltip/style.js

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

package/es/hooks/useCopied.d.ts

@@ -0,0 +1,4 @@
+export declare const useCopied: () => {
+    copied: boolean;
+    setCopied: () => void;
+};

package/es/hooks/useCopied.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export var useCopied = function useCopied() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    copied = _useState2[0],
+    setCopy = _useState2[1];
+  useEffect(function () {
+    if (!copied) return;
+    var timer = setTimeout(function () {
+      setCopy(false);
+    }, 2000);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [copied]);
+  var setCopied = useCallback(function () {
+    return setCopy(true);
+  }, []);
+  return useMemo(function () {
+    return {
+      copied: copied,
+      setCopied: setCopied
+    };
+  }, [copied]);
+};

package/es/hooks/useHighlight.d.ts

@@ -0,0 +1,36 @@
+import { Highlighter, Theme } from 'shiki-es';
+export interface ShikiSyntaxTheme {
+    /**
+     * @title 暗色模式主题
+     */
+    dark: Theme;
+    /**
+     * @title 亮色模式主题
+     */
+    light: Theme;
+}
+export declare const languageMap: readonly ["javascript", "js", "jsx", "json", "markdown", "md", "less", "css", "typescript", "ts", "tsx", "diff", "bash"];
+/**
+ * @title 代码高亮的存储对象
+ */
+interface Store {
+    /**
+     * @title 高亮器对象
+     */
+    highlighter?: Highlighter;
+    /**
+     * @title 初始化高亮器对象
+     * @returns 初始化 Promise 对象
+     */
+    initHighlighter: () => Promise<void>;
+    /**
+     * @title 将代码转化为 HTML 字符串
+     * @param text - 代码文本
+     * @param language - 代码语言
+     * @param isDarkMode - 是否为暗黑模式
+     * @returns HTML 字符串
+     */
+    codeToHtml: (text: string, language: string, isDarkMode: boolean) => string;
+}
+export declare const useHighlight: import("zustand").UseBoundStore<import("zustand").StoreApi<Store>>;
+export {};

package/es/hooks/useHighlight.js

@@ -0,0 +1,63 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getHighlighter } from 'shiki-es';
+import { create } from 'zustand';
+var THEME = {
+  dark: 'material-darker',
+  light: 'material-lighter'
+};
+export var languageMap = ['javascript', 'js', 'jsx', 'json', 'markdown', 'md', 'less', 'css', 'typescript', 'ts', 'tsx', 'diff', 'bash'];
+
+/**
+ * @title 代码高亮的存储对象
+ */
+
+export var useHighlight = create(function (set, get) {
+  return {
+    highlighter: undefined,
+    initHighlighter: function () {
+      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var highlighter;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (get().highlighter) {
+                _context.next = 5;
+                break;
+              }
+              _context.next = 3;
+              return getHighlighter({
+                langs: languageMap,
+                themes: Object.values(THEME)
+              });
+            case 3:
+              highlighter = _context.sent;
+              set({
+                highlighter: highlighter
+              });
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function initHighlighter() {
+        return _initHighlighter.apply(this, arguments);
+      }
+      return initHighlighter;
+    }(),
+    codeToHtml: function codeToHtml(text, language, isDarkMode) {
+      var _get = get(),
+        highlighter = _get.highlighter;
+      if (!highlighter) return '';
+      try {
+        return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+          lang: language,
+          theme: isDarkMode ? THEME.dark : THEME.light
+        });
+      } catch (e) {
+        return text;
+      }
+    }
+  };
+});

package/es/index.d.ts

@@ -1,9 +1,21 @@
 export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from './ActionIcon';
+export { default as Avatar, type AvatarProps } from './Avatar';
+export { default as ContextMenu, type ContextMenuProps } from './ContextMenu';
+export { default as CopyButton, type CopyButtonProps } from './CopyButton';
 export { default as DraggablePanel, type DraggablePanelProps } from './DraggablePanel';
+export { default as EditableText, type EditableTextProps } from './EditableText';
+export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
+export { default as Markdown, type MarkdownProps } from './Markdown';
+export { default as MessageInput, type MessageInputProps } from './MessageInput';
+export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
+export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as StroyBook, useControls, useCreateStore, type StroyBookProps, } from './StroyBook';
+export { default as Swatches, type SwatchesProps } from './Swatches';
 export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
+export { default as Tooltip, type TooltipProps } from './Tooltip';

package/es/index.js

@@ -1,9 +1,21 @@
 export { default as ActionIcon } from "./ActionIcon";
+export { default as Avatar } from "./Avatar";
+export { default as ContextMenu } from "./ContextMenu";
+export { default as CopyButton } from "./CopyButton";
 export { default as DraggablePanel } from "./DraggablePanel";
+export { default as EditableText } from "./EditableText";
+export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
+export { default as List } from "./List";
 export { default as Logo } from "./Logo";
+export { default as Markdown } from "./Markdown";
+export { default as MessageInput } from "./MessageInput";
+export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
+export { default as Snippet } from "./Snippet";
 export { default as StroyBook, useControls, useCreateStore } from "./StroyBook";
+export { default as Swatches } from "./Swatches";
 export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
-export { default as ThemeSwitch } from "./ThemeSwitch";
+export { default as ThemeSwitch } from "./ThemeSwitch";
+export { default as Tooltip } from "./Tooltip";

package/es/styles/theme/base.d.ts

@@ -0,0 +1,2 @@
+import { ThemeConfig } from 'antd';
+export declare const baseTheme: ThemeConfig;

package/es/styles/theme/base.js

@@ -0,0 +1,15 @@
+export var baseTheme = {
+  token: {
+    colorInfo: '#0070f3',
+    colorSuccess: '#50e3c2',
+    colorWarning: '#f5a623',
+    colorError: '#ee0000',
+    borderRadius: 5,
+    borderRadiusXS: 3,
+    borderRadiusSM: 3,
+    borderRadiusLG: 8,
+    controlHeight: 36,
+    fontFamily: "'Segoe UI', SegoeUI, AliPuHui, -apple-system ,BlinkMacSystemFont,Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'",
+    fontFamilyCode: "'Hack Nerd Font Mono', 'Hack', 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
+  }
+};

package/es/styles/theme/dark.js

@@ -3,6 +3,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { theme } from 'antd';
 import { genMapTokenAlgorithm } from "../algorithms";
+import { baseTheme } from "./base";
 var cyanColors = ['rgba(0, 225, 242, 0.12)', 'rgba(0, 232, 245, 0.22)', 'rgba(0, 237, 250, 0.32)', 'rgba(0, 243, 255, 0.42)', 'rgba(0, 247, 255, 0.53)', 'rgba(0, 246, 254, 0.65)', 'rgba(0, 247, 253, 0.77)', 'rgba(0, 245, 255, 0.75)', 'rgba(0, 244, 255, 0.73)', 'rgba(0, 239, 253, 0.72)', 'rgba(0, 237, 253, 0.7)'];
 var darkModeRelationship = function darkModeRelationship(type) {
   var _ref;
@@ -49,7 +50,7 @@ var darkAlgorithm = function darkAlgorithm(seedToken, mapToken) {
   });
 };
 export var darkTheme = {
-  token: {
+  token: _objectSpread(_objectSpread({}, baseTheme.token), {}, {
     colorTextLightSolid: '#000000',
     colorBgLayout: '#000000',
     colorBgContainer: '#111111',
@@ -62,21 +63,12 @@ export var darkTheme = {
     colorTextTertiary: '#888888',
     colorTextQuaternary: '#666666',
     colorPrimary: '#ffffff',
-    colorInfo: '#0070f3',
-    colorSuccess: '#50e3c2',
-    colorWarning: '#f5a623',
-    colorError: '#ee0000',
     colorFillQuaternary: 'rgba(0,0,0,0)',
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: '0 12px 20px 6px rgb(0 0 0 / 0.08)',
     boxShadowSecondary: '0 2px 8px 2px rgb(0 0 0 / 0.07), 0 2px 4px -1px rgb(0 0 0 / 0.04)',
-    colorLinkHover: darkColorPalettes.primary[7],
-    colorLink: darkColorPalettes.primary[6],
-    colorLinkActive: darkColorPalettes.primary[5]
-  },
+    colorLinkHover: '#3291ff',
+    colorLink: '#0070f3',
+    colorLinkActive: '#0761d1'
+  }),
   algorithm: darkAlgorithm
 };

package/es/styles/theme/light.js

@@ -2,13 +2,14 @@ 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 { genMapTokenAlgorithm } from "../algorithms";
+import { baseTheme } from "./base";
 var lightMode = genMapTokenAlgorithm('light');
 export var lightColorPalettes = lightMode.palettes;
 export var lightTheme = {
-  token: {
+  token: _objectSpread(_objectSpread({}, baseTheme.token), {}, {
     colorTextLightSolid: '#ffffff',
-    colorBgLayout: '#ffffff',
-    colorBgContainer: '#fafafa',
+    colorBgLayout: '#fafafa',
+    colorBgContainer: '#ffffff',
     colorBgElevated: '#f2f2f2',
     colorBgSpotlight: '#999999',
     colorBorder: '#eaeaea',
@@ -18,18 +19,16 @@ export var lightTheme = {
     colorTextTertiary: '#666666',
     colorTextQuaternary: '#888888',
     colorPrimary: '#000000',
+    colorFill: 'rgba(0,0,0,0.1)',
+    colorFillSecondary: 'rgba(0,0,0,0.075)',
+    colorFillTertiary: 'rgba(0,0,0,0.05)',
     colorFillQuaternary: 'rgba(0,0,0,0)',
-    borderRadius: 5,
-    borderRadiusXS: 3,
-    borderRadiusSM: 3,
-    borderRadiusLG: 8,
-    controlHeight: 36,
     boxShadow: '0 12px 20px 6px rgb(104 112 118 / 0.08)',
     boxShadowSecondary: '0 2px 8px 2px rgb(104 112 118 / 0.07), 0 2px 4px -1px rgb(104 112 118 / 0.04)',
-    colorLinkHover: lightColorPalettes.primary[5],
-    colorLink: lightColorPalettes.primary[6],
-    colorLinkActive: lightColorPalettes.primary[7]
-  },
+    colorLinkHover: '#3291ff',
+    colorLink: '#0070f3',
+    colorLinkActive: '#0761d1'
+  }),
   algorithm: function algorithm(seedToken, mapToken) {
     return _objectSpread(_objectSpread({}, mapToken), lightMode.tokens);
   }

package/es/types/index.d.ts

@@ -1,9 +1,18 @@
 import { Theme as AntdStyleTheme } from 'antd-style';
 import React from 'react';
+
 declare module 'styled-components' {
-    interface DefaultTheme extends AntdStyleTheme {
-    }
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends AntdStyleTheme {}
+}
+
+export type DivProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+>;
+
+declare global {
+  type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
+
+  type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;
 }
-export declare type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export declare type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
-export declare type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;

package/lib/ActionIcon/index.d.ts

@@ -1,7 +1,7 @@
-import { DivProps } from "../types";
+/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import React from 'react';
-export declare type ActionIconSize = 'large' | 'normal' | 'small' | {
+import { DivProps } from "../types";
+export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     fontSize?: number;
     strokeWidth?: number;
@@ -23,6 +23,11 @@ export interface ActionIconProps extends DivProps {
      * @type LucideIcon
      */
     icon: LucideIcon;
+    /**
+     * @description Glass blur style
+     * @default 'false'
+     */
+    glass?: boolean;
 }
-declare const _default: React.NamedExoticComponent<ActionIconProps>;
-export default _default;
+declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
+export default ActionIcon;

package/lib/ActionIcon/index.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/ActionIcon/index.tsx
@@ -33,47 +23,46 @@ __export(ActionIcon_exports, {
 });
 module.exports = __toCommonJS(ActionIcon_exports);
 var import__ = require("../index");
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 var import_style = require("./style");
-var ActionIcon = ({
-  className,
-  active,
-  icon,
-  size = "normal",
-  style,
-  ...props
-}) => {
-  const { styles, cx } = (0, import_style.useStyles)(active);
-  let blockSize;
-  let borderRadius;
-  switch (size) {
-    case "large":
-      blockSize = 44;
-      borderRadius = 8;
-      break;
-    case "normal":
-      blockSize = 36;
-      borderRadius = 5;
-      break;
-    case "small":
-      blockSize = 28;
-      borderRadius = 5;
-      break;
-    default:
-      blockSize = (size == null ? void 0 : size.blockSize) || 36;
-      borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
-      break;
+var ActionIcon = (0, import_react.memo)(
+  ({ className, active, icon, size = "normal", style, glass, ...props }) => {
+    const { styles, cx } = (0, import_style.useStyles)({ active: Boolean(active), glass: Boolean(glass) });
+    let blockSize;
+    let borderRadius;
+    switch (size) {
+      case "large":
+        blockSize = 44;
+        borderRadius = 8;
+        break;
+      case "normal":
+        blockSize = 36;
+        borderRadius = 5;
+        break;
+      case "small":
+        blockSize = 28;
+        borderRadius = 5;
+        break;
+      case "site":
+        blockSize = 34;
+        borderRadius = 5;
+        break;
+      default:
+        blockSize = (size == null ? void 0 : size.blockSize) || 36;
+        borderRadius = (size == null ? void 0 : size.borderRadius) || 5;
+        break;
+    }
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: cx(styles.block, className),
+        style: { width: blockSize, height: blockSize, borderRadius, ...style },
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(import__.Icon, { size: size === "site" ? "small" : size, icon })
+    );
   }
-  return /* @__PURE__ */ import_react.default.createElement(
-    "div",
-    {
-      className: cx(styles.block, className),
-      style: { width: blockSize, height: blockSize, borderRadius, ...style },
-      ...props
-    },
-    /* @__PURE__ */ import_react.default.createElement(import__.Icon, { size, icon })
-  );
-};
-var ActionIcon_default = import_react.default.memo(ActionIcon);
+);
+var ActionIcon_default = ActionIcon;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/ActionIcon/style.d.ts

@@ -1,3 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    active: boolean;
+    glass: boolean;
+} | undefined) => import("antd-style").ReturnStyles<{
     block: import("antd-style").SerializedStyles;
 }>;

package/lib/ActionIcon/style.js

@@ -23,34 +23,41 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_antd_style = require("antd-style");
-var useStyles = (0, import_antd_style.createStyles)(({ css, token }, active) => {
-  return {
-    block: css`
-      cursor: pointer;
+var useStyles = (0, import_antd_style.createStyles)(
+  ({ css, token }, { active, glass }) => {
+    return {
+      block: css`
+        cursor: pointer;
 
-      display: flex;
-      flex: none;
-      align-items: center;
-      justify-content: center;
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
 
-      color: ${active ? token.colorText : token.colorTextQuaternary};
+        color: ${active ? token.colorText : token.colorTextQuaternary};
 
-      background: ${active ? token.colorFill : "transparent"};
+        background: ${active ? token.colorFillTertiary : "transparent"};
 
-      transition: color 600ms ${token.motionEaseOut}, background-color 100ms ${token.motionEaseOut};
+        transition: color 600ms ${token.motionEaseOut},
+          background-color 100ms ${token.motionEaseOut};
 
-      &:hover {
-        color: ${token.colorText};
-        background-color: ${token.colorFillTertiary};
-      }
+        ${glass && css`
+          backdrop-filter: saturate(180%) blur(10px);
+        `}
 
-      &:active {
-        color: ${token.colorText};
-        background-color: ${token.colorFill};
-      }
-    `
-  };
-});
+        &:hover {
+          color: ${token.colorText};
+          background-color: ${active ? token.colorFillSecondary : token.colorFillTertiary};
+        }
+
+        &:active {
+          color: ${token.colorText};
+          background-color: ${token.colorFill};
+        }
+      `
+    };
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   useStyles