@lobehub/ui 1.3.0 → 1.4.0

package/es/List/ListItem/index.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+/**
+ * 卡片列表项的属性
+ */
+export interface ListItemProps {
+    /**
+     * 是否处于激活状态
+     */
+    active: boolean;
+    /**
+     * 是否处于加载状态
+     */
+    loading?: boolean;
+    /**
+     * 标题
+     */
+    title: string;
+    /**
+     * 描述信息
+     */
+    description?: string;
+    /**
+     * 日期时间戳
+     */
+    date?: number;
+    /**
+     * 点击事件回调函数
+     */
+    onClick?: () => void;
+    /**
+     * 鼠标悬停状态变化事件回调函数
+     * @param hover - 是否悬停
+     */
+    onHoverChange?: (hover: boolean) => void;
+    /**
+     * 渲染操作区域的 React 节点
+     */
+    renderActions?: ReactNode;
+    /**
+     * 头像的 React 节点
+     */
+    avatar?: ReactNode;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 自定义样式对象
+     */
+    style?: CSSProperties;
+    /**
+     * 是否显示操作区域
+     */
+    showAction?: boolean;
+    /**
+     * 自定义样式类名对象
+     * @property time - 时间的样式类名
+     */
+    classNames?: {
+        time?: string;
+    };
+}
+declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+export default ListItem;

package/es/List/ListItem/index.js

@@ -0,0 +1,110 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "renderActions", "className", "style", "showAction", "classNames"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+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 { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
+import { createStyles } from 'antd-style';
+import { forwardRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { convertAlphaToSolid } from "../../utils/colorUtils";
+import { getChatItemTime } from "./time";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token;
+  var textOverlay = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    --overlay-background: ", ";\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    right: 0;\n\n    width: 32px;\n    height: 44px;\n\n    background: linear-gradient(to right, transparent, var(--overlay-background));\n  "])), token.colorBgLayout);
+  var overlayColor = convertAlphaToSolid(token.colorFillContent, token.colorBgLayout);
+  var hoverOverlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", " {\n      --overlay-background: ", ";\n    }\n  "])), cx(textOverlay), overlayColor);
+  return {
+    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      border-radius: 8px;\n\n      &:hover {\n        background: ", ";\n        ", "\n      }\n    "])), token.colorTextTertiary, token.colorFillContent, hoverOverlay),
+    active: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      ", "\n    "])), token.colorText, token.colorFillContent, hoverOverlay),
+    content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
+    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 0.9em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "]))),
+    time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
+    desc: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 0.75em;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n\n      opacity: 0.5;\n    "]))),
+    textOverlay: textOverlay
+  };
+});
+
+/**
+ * 卡片列表项的属性
+ */
+
+var ListItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var active = _ref2.active,
+    avatar = _ref2.avatar,
+    loading = _ref2.loading,
+    description = _ref2.description,
+    date = _ref2.date,
+    title = _ref2.title,
+    onHoverChange = _ref2.onHoverChange,
+    renderActions = _ref2.renderActions,
+    className = _ref2.className,
+    style = _ref2.style,
+    showAction = _ref2.showAction,
+    _ref2$classNames = _ref2.classNames,
+    classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    ref: ref,
+    horizontal: true,
+    paddingBlock: 8,
+    gap: 8,
+    paddingInline: '12px 8px',
+    align: 'flex-start',
+    distribution: 'space-between',
+    className: cx(styles.container, active && styles.active, className),
+    style: style
+  }, props), {}, {
+    onMouseEnter: function onMouseEnter() {
+      onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(false);
+    },
+    children: [avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(MessageOutlined, {
+      style: {
+        marginTop: 4
+      }
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      className: styles.content,
+      children: [/*#__PURE__*/_jsx(Flexbox, {
+        horizontal: true,
+        distribution: 'space-between',
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.title,
+          children: title
+        })
+      }), description && /*#__PURE__*/_jsx("div", {
+        className: styles.desc,
+        children: description
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.textOverlay
+      })]
+    }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
+      spin: true
+    }) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
+      horizontal: true,
+      gap: 4,
+      style: {
+        display: showAction ? undefined : 'none'
+      },
+      onClick: function onClick(e) {
+        e.stopPropagation();
+      },
+      children: renderActions
+    }) : date && /*#__PURE__*/_jsx("div", {
+      className: cx(styles.time, classNames.time),
+      children: getChatItemTime(date)
+    })]
+  }));
+});
+export default ListItem;

package/es/List/ListItem/time.d.ts

@@ -0,0 +1,2 @@
+import 'dayjs/locale/zh-cn';
+export declare const getChatItemTime: (updateAt: number) => string;

package/es/List/ListItem/time.js

@@ -0,0 +1,10 @@
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+dayjs.locale('zh-cn');
+export var getChatItemTime = function getChatItemTime(updateAt) {
+  var time = dayjs(updateAt);
+  var diff = dayjs().day() - time.day();
+  if (time.isSame(dayjs(), 'day')) return time.format('HH:mm');
+  if (diff === 1) return '昨天';
+  return time.format('MM-DD');
+};

package/es/List/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const List: {
+    Item: import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>;
+};
+export default List;

package/es/List/index.js

@@ -0,0 +1,5 @@
+import ListItem from "./ListItem";
+var List = {
+  Item: ListItem
+};
+export default List;

package/es/index.d.ts

@@ -1,9 +1,12 @@
 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';

package/es/index.js

@@ -1,9 +1,12 @@
 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";

package/lib/Avatar/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+export interface AvatarProps {
+    avatar?: string;
+    title?: string;
+    size?: number;
+    shape?: 'circle' | 'square';
+    background?: string;
+}
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/lib/Avatar/index.js

@@ -0,0 +1,74 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Avatar/index.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  default: () => Avatar_default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_antd = require("antd");
+var import_antd_style = require("antd-style");
+var import_react_layout_kit = require("react-layout-kit");
+var useStyles = (0, import_antd_style.createStyles)(({ css, token }) => ({
+  container: css`
+    cursor: pointer;
+
+    > * {
+      cursor: pointer;
+    }
+  `,
+  border: css`
+    border: 1px solid ${token.colorBorder};
+  `
+}));
+var Avatar = ({ avatar, title, size = 40, shape = "circle", background }) => {
+  const { styles, theme } = useStyles();
+  const backgroundColor = background ?? theme.colorBgContainer;
+  const isImage = avatar && ["/", "http", "data:"].some((i) => avatar.startsWith(i));
+  return /* @__PURE__ */ React.createElement(
+    import_react_layout_kit.Center,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: shape === "circle" ? "50%" : 6,
+        backgroundColor,
+        borderWidth: isImage ? 1 : 0
+      },
+      className: styles.container
+    },
+    !avatar ? /* @__PURE__ */ React.createElement(import_antd.Avatar, { shape, size }, title == null ? void 0 : title.slice(0, 2)) : isImage ? /* @__PURE__ */ React.createElement(import_antd.Avatar, { shape, size, src: avatar, className: styles.border }) : /* @__PURE__ */ React.createElement(
+      import_react_layout_kit.Center,
+      {
+        className: styles.border,
+        style: {
+          width: size,
+          height: size,
+          fontSize: size / 2,
+          borderRadius: shape === "circle" ? "50%" : 6,
+          backgroundColor
+        }
+      },
+      avatar
+    )
+  );
+};
+var Avatar_default = Avatar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ContextMenu/MenuItem/icons.d.ts

@@ -0,0 +1,4 @@
+export declare const CommandIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ControlIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShiftIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const AltIcon: () => import("react/jsx-runtime").JSX.Element;

package/lib/ContextMenu/MenuItem/icons.js

@@ -0,0 +1,100 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContextMenu/MenuItem/icons.tsx
+var icons_exports = {};
+__export(icons_exports, {
+  AltIcon: () => AltIcon,
+  CommandIcon: () => CommandIcon,
+  ControlIcon: () => ControlIcon,
+  ShiftIcon: () => ShiftIcon
+});
+module.exports = __toCommonJS(icons_exports);
+var strokeWidth = 2.2;
+var iconSize = "13px";
+var CommandIcon = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconSize,
+    height: iconSize,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z" })
+);
+var ControlIcon = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconSize,
+    height: iconSize,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-up"
+  },
+  /* @__PURE__ */ React.createElement("polyline", { points: "18 15 12 9 6 15" })
+);
+var ShiftIcon = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconSize,
+    height: iconSize,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-up"
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M9 18v-6H5l7-7 7 7h-4v6H9z" })
+);
+var AltIcon = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: iconSize,
+    height: iconSize,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "lucide lucide-chevron-up"
+  },
+  /* @__PURE__ */ React.createElement("path", { d: "M3 3h6l6 18h6" }),
+  /* @__PURE__ */ React.createElement("path", { d: "M14 3h7" })
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AltIcon,
+  CommandIcon,
+  ControlIcon,
+  ShiftIcon
+});

package/lib/ContextMenu/MenuItem/index.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface MenuItemProps {
+    label: ReactNode;
+    disabled?: boolean;
+    active?: boolean;
+    selected?: boolean;
+    nested?: boolean;
+    icon?: ReactNode;
+    shortcut?: string[];
+}
+declare const MenuItem: import("react").ForwardRefExoticComponent<MenuItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default MenuItem;

package/lib/ContextMenu/MenuItem/index.js

@@ -0,0 +1,72 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContextMenu/MenuItem/index.tsx
+var MenuItem_exports = {};
+__export(MenuItem_exports, {
+  default: () => MenuItem_default
+});
+module.exports = __toCommonJS(MenuItem_exports);
+var import_lucide_react = require("lucide-react");
+var import_react = require("react");
+var import_react_layout_kit = require("react-layout-kit");
+var import_icons = require("./icons");
+var import_style = require("./style");
+var KEYBOARD_ICON_MAP = {
+  meta: /* @__PURE__ */ React.createElement(import_icons.CommandIcon, null),
+  control: /* @__PURE__ */ React.createElement(import_icons.ControlIcon, null),
+  shift: /* @__PURE__ */ React.createElement(import_icons.ShiftIcon, null),
+  alt: /* @__PURE__ */ React.createElement(import_icons.AltIcon, null),
+  enter: "↵"
+};
+var CODE_MAP = {
+  meta: "meta",
+  command: "meta",
+  cmd: "meta",
+  ctl: "control",
+  control: "control",
+  shift: "shift",
+  alt: "alt"
+};
+var MenuItem = (0, import_react.forwardRef)(
+  ({ label, icon, disabled, nested, shortcut, active, selected, ...props }, ref) => {
+    const { styles, cx } = (0, import_style.useStyles)();
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        ...props,
+        ref,
+        role: "menuitem",
+        disabled,
+        className: cx(styles.item, {
+          [styles.selected]: selected,
+          [styles.active]: active
+        })
+      },
+      /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, icon && /* @__PURE__ */ React.createElement("span", null, icon), label),
+      nested ? /* @__PURE__ */ React.createElement("span", { "aria-hidden": true }, /* @__PURE__ */ React.createElement(import_lucide_react.ChevronRightIcon, { className: styles.arrow })) : shortcut ? /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, align: "center" }, shortcut.map((c) => {
+        const code = CODE_MAP[c.toLowerCase()];
+        return /* @__PURE__ */ React.createElement("kbd", { className: styles.kbd, key: c }, code ? KEYBOARD_ICON_MAP[code] : c.toUpperCase());
+      })) : null
+    );
+  }
+);
+var MenuItem_default = MenuItem;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/ContextMenu/MenuItem/style.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    item: string;
+    selected: string;
+    active: string;
+    arrow: import("antd-style").SerializedStyles;
+    kbd: import("antd-style").SerializedStyles;
+}>;

package/lib/ContextMenu/MenuItem/style.js

@@ -0,0 +1,94 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ContextMenu/MenuItem/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css, cx, token }, prefixCls) => {
+  const selected = css`
+    font-weight: bold;
+    color: ${token.colorPrimaryText};
+    background: ${token.colorPrimaryBg};
+    &:hover {
+      color: ${token.colorPrimaryTextHover};
+      background: ${token.colorPrimaryBgHover};
+    }
+  `;
+  return {
+    item: cx(
+      `${prefixCls}-item`,
+      css`
+        all: unset;
+
+        user-select: none;
+        scroll-margin: 50px;
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        box-sizing: inherit;
+        width: 100%;
+        padding: 12px 10px;
+
+        font-family: ${token.fontFamily};
+        font-weight: normal;
+        line-height: 1;
+        color: ${token.colorText};
+
+        background: transparent;
+        border-radius: 5px;
+        &:hover {
+          background: ${token.colorFillTertiary};
+        }
+      `
+    ),
+    selected: cx(`${prefixCls}-item-selected`, selected),
+    active: cx(
+      `${prefixCls}-item-active`,
+      css`
+        background: ${token.colorFillTertiary};
+      `
+    ),
+    arrow: css`
+      color: ${token.colorTextTertiary};
+    `,
+    kbd: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 18px;
+      height: 20px;
+
+      font-family: ${token.fontFamily};
+      font-size: 14px;
+      color: ${token.colorTextQuaternary};
+
+      border-radius: 2px;
+    `
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/ContextMenu/index.d.ts

@@ -0,0 +1,9 @@
+import { HTMLProps } from 'react';
+import { MenuItemType } from './types';
+export interface ContextMenuProps {
+    label?: string;
+    items: MenuItemType[];
+    container?: HTMLElement;
+}
+declare const ContextMenu: import("react").ForwardRefExoticComponent<Omit<ContextMenuProps & HTMLProps<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default ContextMenu;