@endfield-ui/react 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "终末地风格的 React 基础控件库（非官方）",
   "keywords": [
     "react",
@@ -33,6 +33,7 @@
     "!src/**/*.test.*",
     "!src/test",
     "!src/game",
+    "!src/**/*.md",
     "NOTICE.md"
   ],
   "exports": {
@@ -62,31 +63,36 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "^1.8.0",
+    "@base-ui/react": "^1.9.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "@tailwindcss/cli": "^4.3.3",
+    "@rollup/plugin-commonjs": "^29.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@tailwindcss/node": "^4.3.3",
+    "@tailwindcss/oxide": "^4.3.3",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
-    "@testing-library/user-event": "^14.6.7",
+    "@testing-library/user-event": "^14.6.8",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "jsdom": "^30.1.2",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "rollup": "^4.64.12",
     "tailwindcss": "^4.3.3",
-    "tsdown": "^0.23.0",
+    "tsdown": "^0.23.1",
     "typescript": "^7.0.2",
-    "vitest": "^5.0.3"
+    "vitest": "^5.0.5"
   },
   "scripts": {
     "build": "tsdown && pnpm build:css && pnpm build:game",
-    "build:css": "tailwindcss -i src/styles/index.css -o dist/styles.css --minify",
-    "build:game": "tailwindcss -i src/game/styles.css -o dist/game/styles.css --minify && node scripts/copy-game-assets.mjs",
+    "build:css": "node scripts/build-css.mjs src/styles/index.css dist/styles.css",
+    "build:game": "node scripts/build-css.mjs src/game/styles.css dist/game/styles.css && node scripts/copy-game-assets.mjs",
     "test": "vitest run",
+    "test:package": "node --test scripts/package.test.mjs",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }

package/src/components/accordion/Accordion.tsx

@@ -1,6 +1,5 @@
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -9,11 +8,12 @@ import {
 import { Minus } from "../../icons/Minus";
 import { cn } from "../../lib/cn";
 import { focusRingInset } from "../../lib/focus-ring";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type AccordionSize = "sm" | "md";
 export type AccordionLevel = 2 | 3 | 4 | 5 | 6;
 
-const AccordionContext = createContext<{
+const getAccordionContext = /* @__PURE__ */ createLazyContext<{
   size: AccordionSize;
   level: AccordionLevel;
 }>({ size: "md", level: 3 });
@@ -59,10 +59,11 @@ export function Accordion({
   children,
   ...props
 }: AccordionProps) {
+  const AccordionContext = getAccordionContext();
   const context = useMemo(() => ({ size, level }), [size, level]);
 
   return (
-    <AccordionContext value={context}>
+    <AccordionContext.Provider value={context}>
       <BaseAccordion.Root
         {...props}
         multiple={multiple}
@@ -78,7 +79,7 @@ export function Accordion({
       >
         {children}
       </BaseAccordion.Root>
-    </AccordionContext>
+    </AccordionContext.Provider>
   );
 }
 
@@ -112,7 +113,7 @@ export function AccordionItem({
   children,
   ...props
 }: AccordionItemProps) {
-  const { size, level } = useContext(AccordionContext);
+  const { size, level } = useContext(getAccordionContext());
   const Heading = `h${level}` as const;
 
   return (
@@ -124,6 +125,13 @@ export function AccordionItem({
     >
       <BaseAccordion.Header render={<Heading />} className="flex">
         <BaseAccordion.Trigger
+          render={(props, state) => (
+            <button
+              {...props}
+              disabled={false}
+              aria-disabled={state.disabled || undefined}
+            />
+          )}
           className={cn(
             "group/trigger flex w-full items-center gap-3 px-4 text-left font-medium",
             "transition-colors duration-(--duration-fast) ease-standard",

package/src/components/avatar/AvatarSwitcher.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useEffect,
@@ -17,6 +16,7 @@ import { ChevronRight } from "../../icons/ChevronRight";
 import { cn } from "../../lib/cn";
 import { IconButton } from "../icon-button/IconButton";
 import { Avatar, type AvatarSize } from "./Avatar";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type AvatarSwitcherOrientation = "vertical" | "horizontal";
 
@@ -27,7 +27,8 @@ type SwitcherContextValue = {
   select: (value: string) => void;
 };
 
-const SwitcherContext = createContext<SwitcherContextValue | null>(null);
+const getSwitcherContext =
+  /* @__PURE__ */ createLazyContext<SwitcherContextValue | null>(null);
 
 export type AvatarSwitcherProps = Omit<
   ComponentProps<"div">,
@@ -74,6 +75,7 @@ export function AvatarSwitcher({
   children,
   ...props
 }: AvatarSwitcherProps) {
+  const SwitcherContext = getSwitcherContext();
   const generatedName = useId();
   const name = nameProp ?? generatedName;
   const vertical = orientation === "vertical";
@@ -138,7 +140,7 @@ export function AvatarSwitcher({
   const Next = vertical ? ChevronDown : ChevronRight;
 
   return (
-    <SwitcherContext value={context}>
+    <SwitcherContext.Provider value={context}>
       <div
         {...props}
         role="radiogroup"
@@ -185,7 +187,7 @@ export function AvatarSwitcher({
           <Next />
         </IconButton>
       </div>
-    </SwitcherContext>
+    </SwitcherContext.Provider>
   );
 }
 
@@ -213,7 +215,7 @@ export function AvatarSwitcherItem({
   children,
   ...props
 }: AvatarSwitcherItemProps) {
-  const context = useContext(SwitcherContext);
+  const context = useContext(getSwitcherContext());
   if (!context) {
     throw new Error("AvatarSwitcherItem 要放在 AvatarSwitcher 里面");
   }

package/src/components/button/Button.tsx

@@ -12,20 +12,20 @@ export type ButtonSize = "sm" | "md" | "lg";
 
 type OwnProps = {
   /**
-   * - `control` 深灰底 + 黄色竖条，默认；
+   * - `control` 深灰底，默认；暗色主题下是半透明的白；
    * - `action` 信号黄底，一屏只用一个；
-   * - `light` 白底，用在深色底上或作次要项；
+   * - `light` 浅灰底加一层点阵，用在深色底上或作次要项；
    * - `back` 深灰斜纹底 + 左箭头，返回上一级；
    * - `text` 无底、下划线、斜箭头，低强调；
-   * - `danger` 同 `control`，竖条为红色，用于不可逆操作。
+   * - `danger` 红底白字，用于不可逆操作。
    */
   variant?: ButtonVariant;
   size?: ButtonSize;
-  /** 文字左侧的图标 */
+  /** 文字左侧的图标，和文字之间隔一条细竖线 */
   iconStart?: ReactNode;
   /** 文字右侧的图标；`text` 变体默认是斜箭头，传 `null` 去掉 */
   iconEnd?: ReactNode;
-  /** 提交中：记号变成旋转指示，尺寸不变，不响应点击 */
+  /** 提交中：显示旋转指示，尺寸不变，不响应点击 */
   loading?: boolean;
   /** 提交中显示的文字，如"处理中"。传了之后按钮按两段文字里较宽的一段定宽 */
   loadingText?: ReactNode;
@@ -57,12 +57,12 @@ type ButtonAsRendered = OwnProps &
 
 export type ButtonProps = ButtonAsButton | ButtonAsLink | ButtonAsRendered;
 
-/** 左侧带竖条的变体：竖条绝对定位，不参与文字居中 */
-const markerColor: Partial<Record<ButtonVariant, string>> = {
-  control: "bg-action",
-  light: "bg-neutral-500",
-  danger: "bg-alert",
-};
+/** 没有记号的三种：左右留白对称，悬停只换底色 */
+const plainVariants: ReadonlySet<ButtonVariant> = new Set([
+  "control",
+  "light",
+  "danger",
+]);
 
 const sizeClass: Record<ButtonSize, string> = {
   sm: "h-8 gap-1.5 text-sm",
@@ -70,32 +70,24 @@ const sizeClass: Record<ButtonSize, string> = {
   lg: "h-14 gap-2.5 text-lg",
 };
 
-/*
- * 带竖条的变体左右留白对称，并且比规格表的"水平内边距"更宽：
- * 要给"箭头盒 + 悬停位移"留出位置，文字再长也不会被箭头压到。
- */
-const markerPadding: Record<ButtonSize, string> = {
-  sm: "min-w-16 px-7",
-  md: "min-w-24 px-10",
-  lg: "min-w-40 px-13",
-};
-
-const markerBox: Record<ButtonSize, string> = {
-  sm: "left-3 h-4 w-2 [--marker-bar:2px]",
-  md: "left-4 h-5 w-2.5",
-  lg: "left-6 h-7 w-3",
+const plainPadding: Record<ButtonSize, string> = {
+  sm: "min-w-16 px-4",
+  md: "min-w-24 px-6",
+  lg: "min-w-40 px-8",
 };
 
-const markerShift: Record<ButtonSize, string> = {
-  sm: "group-hover:translate-x-1 group-active:translate-x-1",
-  md: "group-hover:translate-x-1.5 group-active:translate-x-1.5",
-  lg: "group-hover:translate-x-2 group-active:translate-x-2",
+/* 没有图标时，加载中的旋转方块放在左侧留白的正中：不挤文字，宽度也不变 */
+const paddingSpinner: Record<ButtonSize, string> = {
+  sm: "left-[5px] size-1.5",
+  md: "left-2 size-2",
+  lg: "left-[11px] size-2.5",
 };
 
-const markerSpinner: Record<ButtonSize, string> = {
-  sm: "left-3 size-2",
-  md: "left-4 size-2.5",
-  lg: "left-6 size-3",
+/* 图标和文字之间的细竖线（官网 /cloud 顶栏的按钮）；两边的空由 gap 给 */
+const dividerSize: Record<ButtonSize, string> = {
+  sm: "h-3",
+  md: "h-3.5",
+  lg: "h-4",
 };
 
 /* action：文字在分隔线左侧的区域里居中，分隔线右侧留一窄条 */
@@ -127,12 +119,13 @@ const inlineIconSize: Record<ButtonSize, number> = { sm: 14, md: 16, lg: 20 };
 
 const enabledClass: Record<ButtonVariant, string> = {
   control:
-    "bg-control text-on-control shadow-xs hover:bg-control-hover hover:text-white active:bg-control-pressed active:text-white",
+    "bg-button text-on-button shadow-xs hover:bg-button-hover hover:text-white active:bg-button-pressed active:text-white",
+  // 两个主题下是同一个红：暗色主题的 danger 是文字色，配白字不到 4.5:1
   danger:
-    "bg-control text-on-control shadow-xs hover:bg-control-hover hover:text-white active:bg-control-pressed active:text-white",
-  // 有意不随主题翻转：它本来就是给深色底用的
+    "bg-alert-fill text-white shadow-xs hover:bg-alert-fill-hover active:bg-alert-fill-pressed",
+  // 有意不随主题翻转：它本来就是给深色底用的。点阵也写成固定的墨色比例，悬停、按下只换底色
   light:
-    "bg-neutral-0 text-neutral-900 shadow-xs hover:bg-neutral-100 active:bg-neutral-200",
+    "dot-grid bg-neutral-100 text-neutral-900 shadow-xs [--dot-color:color-mix(in_srgb,var(--color-neutral-900)_8%,transparent)] [--dot-gap:4px] [--dot-size:0.5px] hover:bg-neutral-50 active:bg-neutral-200",
   // 黄色按钮悬停时底色不变，只有分隔线加深
   action: "bg-action text-on-action shadow-md active:bg-action-pressed",
   back: "hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed",
@@ -141,7 +134,7 @@ const enabledClass: Record<ButtonVariant, string> = {
 
 /*
  * 高对比模式（forced-colors）下底色被系统换成页面色，带底色的变体只剩一行字：
- * 补一圈线，竖条、分隔线、加载中的方块这些底色画的记号改用按钮的字色。
+ * 补一圈线，细竖线、分隔线、加载中的方块这些底色画的记号改用按钮的字色。
  * 禁用的线、字、记号都是灰字色——链接形态禁用时是一个去掉了地址的 <a>，
  * 系统不会替它把字换灰，所以字色也写明
  */
@@ -149,6 +142,8 @@ const forcedOutline = "forced-colors:border";
 const forcedEnabled = "forced-colors:border-[ButtonText]";
 const forcedDisabled =
   "forced-colors:border-[GrayText] forced-colors:text-[GrayText]";
+const forcedHover =
+  "forced-colors:hover:underline forced-colors:hover:underline-offset-3";
 
 export function Button(props: ButtonProps) {
   const {
@@ -167,9 +162,9 @@ export function Button(props: ButtonProps) {
 
   const inert = disabled || loading;
   const isText = variant === "text";
-  const marker = markerColor[variant];
+  const plain = plainVariants.has(variant);
   const iconSize = inlineIconSize[size];
-  // 记号在高对比模式下的颜色：竖条、分隔线、占着记号位的旋转方块共用
+  // 记号在高对比模式下的颜色：细竖线、分隔线、旋转方块共用
   const forcedMark = disabled
     ? "forced-colors:bg-[GrayText]"
     : "forced-colors:bg-[ButtonText]";
@@ -179,10 +174,10 @@ export function Button(props: ButtonProps) {
     "transition-colors duration-(--duration-fast) ease-standard",
     focusRing,
     sizeClass[size],
-    marker && markerPadding[size],
+    plain && plainPadding[size],
     variant === "action" && actionPadding[size],
     variant === "back" && backPadding[size],
-    isText && "h-auto border-b border-current py-1",
+    isText ? "h-auto border-b border-current py-1" : "rounded-sm",
     disabled
       ? isText
         ? "cursor-not-allowed text-ink-disabled"
@@ -191,6 +186,8 @@ export function Button(props: ButtonProps) {
     // text 变体靠下划线成形，不补线；它的下划线跟着字色走，禁用时一起写明
     !isText && forcedOutline,
     disabled ? forcedDisabled : !isText && forcedEnabled,
+    // 底色的变化系统不画，悬停就没有反馈了：字加一条下划线（不用"选中"色，那是留给选中的）
+    !disabled && !isText && forcedHover,
     // 加载中不是禁用：线和字照旧。链接形态这时候同样去掉了地址，字色写明，和线一个颜色
     loading && !disabled && "forced-colors:text-[ButtonText]",
     loading && "pointer-events-none",
@@ -198,29 +195,28 @@ export function Button(props: ButtonProps) {
     className,
   );
 
-  // 每个变体自己的记号在加载时变成旋转指示，所以按钮的宽度不会变
+  // 加载时旋转指示占一个已经有的位置（图标、留白、分隔线右侧的窄条），所以按钮的宽度不会变
+  const spinnerBox = (
+    <span
+      className="inline-flex items-center justify-center"
+      style={{ width: iconSize, height: iconSize }}
+    >
+      <Spinner label={null} className={cn("size-2", forcedMark)} />
+    </span>
+  );
   let start = iconStart;
   let end = iconEnd;
   if (variant === "back" && start === undefined) {
-    start = loading ? (
-      <span
-        className="inline-flex items-center justify-center"
-        style={{ width: iconSize, height: iconSize }}
-      >
-        <Spinner label={null} className={cn("size-2", forcedMark)} />
-      </span>
-    ) : (
-      <ChevronLeft size={iconSize} />
-    );
+    start = <ChevronLeft size={iconSize} />;
+  }
+  const hasStart = start !== undefined && start !== null && start !== false;
+  // action 的旋转方块在分隔线右边，text 的在末尾：它们的图标照旧
+  if (loading && hasStart && !isText && variant !== "action") {
+    start = spinnerBox;
   }
   if (isText && end === undefined) {
     end = loading ? (
-      <span
-        className="inline-flex items-center justify-center"
-        style={{ width: iconSize, height: iconSize }}
-      >
-        <Spinner label={null} className={cn("size-2", forcedMark)} />
-      </span>
+      spinnerBox
     ) : (
       <ArrowCorner
         size={iconSize}
@@ -256,38 +252,29 @@ export function Button(props: ButtonProps) {
 
   const content = (
     <>
-      {marker &&
-        (loading ? (
-          <span
-            className={cn(
-              "pointer-events-none absolute top-1/2 -translate-y-1/2",
-              markerSpinner[size],
-            )}
-          >
-            <Spinner
-              label={null}
-              className={cn("block size-full", marker, forcedMark)}
-            />
-          </span>
-        ) : (
-          <span
-            aria-hidden="true"
-            className={cn(
-              "marker-bar pointer-events-none absolute top-1/2 -translate-y-1/2",
-              "transition-[clip-path,translate] duration-(--duration-base) ease-standard",
-              markerBox[size],
-              forcedMark,
-              disabled
-                ? "bg-on-disabled"
-                : [
-                    marker,
-                    "group-hover:marker-arrow group-active:marker-arrow",
-                    markerShift[size],
-                  ],
-            )}
-          />
-        ))}
+      {plain && loading && !hasStart && (
+        <span
+          className={cn(
+            "pointer-events-none absolute top-1/2 -translate-y-1/2",
+            paddingSpinner[size],
+          )}
+        >
+          <Spinner label={null} className={cn("block size-full", forcedMark)} />
+        </span>
+      )}
       {start}
+      {hasStart && !isText && (
+        <span
+          aria-hidden="true"
+          data-button-divider=""
+          className={cn(
+            // 高对比模式下是实色的一条：底色画的线系统会换掉，半透明也看不清
+            "w-px shrink-0 bg-current opacity-30 forced-colors:opacity-100",
+            dividerSize[size],
+            forcedMark,
+          )}
+        />
+      )}
       {label}
       {end}
       {variant === "action" && (

package/src/components/carousel/Carousel.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   type ComponentProps,
@@ -15,6 +14,7 @@ import { focusRing } from "../../lib/focus-ring";
 import { DashIndicator } from "../dash-indicator/DashIndicator";
 import { IconButton } from "../icon-button/IconButton";
 import { useSnapTrack } from "./snap-track";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type CarouselRatio = "16/9" | "4/3" | "1/1" | "3/4" | "21/9";
 
@@ -26,7 +26,7 @@ const ratioClass: Record<CarouselRatio, string> = {
   "21/9": "aspect-21/9",
 };
 
-const SlideContext = createContext<{
+const getSlideContext = /* @__PURE__ */ createLazyContext<{
   position: number;
   count: number;
   current: boolean;
@@ -73,6 +73,7 @@ export function Carousel({
   children,
   ...props
 }: CarouselProps) {
+  const SlideContext = getSlideContext();
   // 标题和说明从子元素上读，所以子元素必须直接是 CarouselSlide
   const slides = Children.toArray(children).filter((child) =>
     isValidElement<SlideLike>(child),
@@ -151,12 +152,12 @@ export function Carousel({
           )}
         >
           {slides.map((slide, position) => (
-            <SlideContext
+            <SlideContext.Provider
               key={position}
               value={{ position, count, current: position === index }}
             >
               {slide}
-            </SlideContext>
+            </SlideContext.Provider>
           ))}
         </div>
         {/* 压在媒体左下角的一对圆钮。它们在轨道外面：轨道滚的时候不跟着走 */}
@@ -228,7 +229,7 @@ export function CarouselSlide({
   children,
   ...props
 }: CarouselSlideProps) {
-  const slide = useContext(SlideContext);
+  const slide = useContext(getSlideContext());
   if (!slide) {
     throw new Error("CarouselSlide 要直接放在 Carousel 里面");
   }

package/src/components/context-menu/ContextMenu.tsx

@@ -3,7 +3,7 @@ import type { ReactElement, ReactNode } from "react";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuPanel,
   type MenuVariant,
 } from "../dropdown-menu/menu-style";
@@ -42,6 +42,7 @@ export function ContextMenu({
   disabled,
   className,
 }: ContextMenuProps) {
+  const MenuVariantContext = getMenuVariantContext();
   const { anchorRef, portalRef } = usePortalScope();
 
   return (
@@ -61,7 +62,9 @@ export function ContextMenu({
               className,
             )}
           >
-            <MenuVariantContext value={variant}>{menu}</MenuVariantContext>
+            <MenuVariantContext.Provider value={variant}>
+              {menu}
+            </MenuVariantContext.Provider>
           </BaseContextMenu.Popup>
         </BaseContextMenu.Positioner>
       </BaseContextMenu.Portal>

package/src/components/data-row/DataRow.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type CSSProperties,
@@ -9,6 +8,7 @@ import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import { bandCanvas, bandGap, bandRow } from "../list/band-style";
 import { Sparkline } from "../sparkline/Sparkline";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type DataRowColumns = {
   /** 名称那一列的列名 */
@@ -32,7 +32,10 @@ export type DataRowListProps = Omit<ComponentProps<"div">, "children"> & {
 
 type Layout = { trend: boolean; reference: boolean };
 
-const LayoutContext = createContext<Layout>({ trend: false, reference: false });
+const getLayoutContext = /* @__PURE__ */ createLazyContext<Layout>({
+  trend: false,
+  reference: false,
+});
 
 /*
  * 列的模板。容器变窄时先收起走势列（@lg 以下），再收起参考值列（@sm 以下）；
@@ -87,6 +90,7 @@ export function DataRowList({
   children,
   ...props
 }: DataRowListProps) {
+  const LayoutContext = getLayoutContext();
   const layout: Layout = {
     trend: columns.trend !== undefined,
     reference: columns.reference !== undefined,
@@ -121,7 +125,9 @@ export function DataRowList({
             </HeaderCell>
           )}
         </div>
-        <LayoutContext value={layout}>{children}</LayoutContext>
+        <LayoutContext.Provider value={layout}>
+          {children}
+        </LayoutContext.Provider>
       </div>
     </div>
   );
@@ -187,7 +193,7 @@ export function DataRow({
   style,
   ...props
 }: DataRowProps) {
-  const layout = useContext(LayoutContext);
+  const layout = useContext(getLayoutContext());
   const hasFavorite = favorite !== undefined || onFavoriteChange !== undefined;
   const dotClass = cn(favoriteDot, favorite ? favoriteOn : favoriteOff);
 

package/src/components/date-picker/DateField.tsx

@@ -23,7 +23,7 @@ import {
 export const dottedDate = (date: string) => date.replaceAll("-", ".");
 
 /** 面板底下那一行里的文字钮 */
-export const dateFooterButton = cn(
+export const dateFooterButton = /* @__PURE__ */ cn(
   "px-2 py-1 text-sm font-medium text-ink underline underline-offset-4 hover:text-ink-secondary",
   "disabled:cursor-not-allowed disabled:text-ink-disabled disabled:no-underline",
   focusRing,

package/src/components/dropdown-menu/DropdownMenu.tsx

@@ -13,7 +13,7 @@ import { defined } from "../../lib/defined";
 import type { LinkRender } from "../link-element/LinkElement";
 import { MenuCheck } from "./MenuCheck";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuGroupLabel,
   menuItem,
   menuItemCurrent,
@@ -66,6 +66,7 @@ export function DropdownMenu({
   className,
   children,
 }: DropdownMenuProps) {
+  const MenuVariantContext = getMenuVariantContext();
   const { anchorRef, portalRef } = usePortalScope();
 
   return (
@@ -91,7 +92,9 @@ export function DropdownMenu({
               className,
             )}
           >
-            <MenuVariantContext value={variant}>{children}</MenuVariantContext>
+            <MenuVariantContext.Provider value={variant}>
+              {children}
+            </MenuVariantContext.Provider>
           </BaseMenu.Popup>
         </BaseMenu.Positioner>
       </BaseMenu.Portal>
@@ -296,7 +299,7 @@ export function DropdownMenuRadioItem({
   children,
   ...props
 }: DropdownMenuRadioItemProps) {
-  const variant = useContext(MenuVariantContext);
+  const variant = useContext(getMenuVariantContext());
 
   return (
     <BaseMenu.RadioItem
@@ -385,7 +388,7 @@ export function DropdownMenuSub({
   className,
   children,
 }: DropdownMenuSubProps) {
-  const variant = useContext(MenuVariantContext);
+  const variant = useContext(getMenuVariantContext());
   // 子面板也挂在 <body> 下：从这一行往上找，能找到主面板带着的主题
   const { anchorRef, portalRef } = usePortalScope();
 

package/src/components/dropdown-menu/menu-style.ts

@@ -1,6 +1,6 @@
-import { createContext } from "react";
 import { focusRingInset } from "../../lib/focus-ring";
 import { enterFromSide } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /*
  * 下拉菜单与下拉选择共用的面板和选项。
@@ -11,7 +11,8 @@ import { enterFromSide } from "../../lib/motion";
 export type MenuVariant = "plain" | "strong";
 
 /** 选项要知道自己在哪种面板里，才知道"当前项"怎么画 */
-export const MenuVariantContext = createContext<MenuVariant>("plain");
+export const getMenuVariantContext =
+  /* @__PURE__ */ createLazyContext<MenuVariant>("plain");
 
 /**
  * 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。