@endfield-ui/react 1.2.0 → 1.2.1

package/dist/lib/cn.d.ts

@@ -0,0 +1,5 @@
+
+import { ClassValue } from "clsx";
+//#region src/lib/cn.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion

package/dist/lib/cn.js

@@ -0,0 +1,2 @@
+"use client";
+import{clsx as e}from"clsx";import{extendTailwindMerge as t}from"tailwind-merge";const n=/* @__PURE__ */ t({extend:{theme:{text:[`micro`,`ghost`],tracking:[`ghost`,`label`],shadow:[`rail`],ease:[`standard`,`emphasis`,`exit`],animate:[`flicker`,`fill`,`scroll-hint`,`breathe`,`marquee`,`spin-slow`,`blink`,`slide-in`,`turn-in`,`fade-in`,`indeterminate`,`bracket-in`,`shift-in`,`wipe-in`]}}});function r(...t){return n(e(t))}export{r as cn};

package/dist/lib/create-lazy-context.js

@@ -0,0 +1,2 @@
+"use client";
+import{createContext as e}from"react";function t(t){let n;return()=>n??=e(t)}export{t as createLazyContext};

package/dist/lib/date.js

@@ -0,0 +1,2 @@
+"use client";
+const e=/^(\d{4})-(\d{2})-(\d{2})$/,t=864e5,n=(e,t=2)=>String(e).padStart(t,`0`),r=t=>{let n=e.exec(t);return n?Date.UTC(Number(n[1]),Number(n[2])-1,Number(n[3])):NaN},i=e=>{let t=new Date(e);return`${n(t.getUTCFullYear(),4)}-${n(t.getUTCMonth()+1)}-${n(t.getUTCDate())}`};function a(){let e=/* @__PURE__ */ new Date;return`${n(e.getFullYear(),4)}-${n(e.getMonth()+1)}-${n(e.getDate())}`}function o(e){let[t,n,r]=e.split(`-`).map(Number);return{year:t,month:n,day:r}}function s(e,n){return i(r(e)+n*t)}function c(e,t){return new Date(Date.UTC(e,t,0)).getUTCDate()}function l(e,t){let{year:r,month:i,day:a}=o(e),s=r*12+(i-1)+t,l=Math.floor(s/12),u=s%12+1;return`${n(l,4)}-${n(u)}-${n(Math.min(a,c(l,u)))}`}function u(e,n){return Math.round((r(n)-r(e))/t)}function d(e){return new Date(r(e)).getUTCDay()}function f(e,t,n){return t&&e<t?t:n&&e>n?n:e}function p(e,t){return e<=t?[e,t]:[t,e]}function m(e){return e.slice(0,7)}function h(e,t){return m(l(`${e}-01`,t))}function g(e,t=1){return s(e,-((d(e)-t+7)%7))}function _(e,t=1){let n=g(`${e}-01`,t);return Array.from({length:6},(e,t)=>Array.from({length:7},(e,r)=>s(n,t*7+r)))}function v(e,t){let n=u(e,t)+1;return Array.from({length:Math.max(0,n)},(t,n)=>s(e,n))}function y(e){return new Date(r(e))}export{s as addDays,l as addMonths,h as addMonthsToMonth,f as clampDate,o as dateParts,d as dayOfWeek,u as daysBetween,c as daysInMonth,v as eachDay,_ as monthGrid,m as monthOf,p as orderDates,g as startOfWeek,y as toDateObject,a as today};

package/dist/lib/decor.js

@@ -0,0 +1,2 @@
+"use client";
+const e=`pointer-events-none select-none forced-colors:hidden print:hidden`;export{e as decor};

package/dist/lib/defined.js

@@ -0,0 +1,2 @@
+"use client";
+function e(e){return Object.fromEntries(Object.entries(e).filter(([,e])=>e!==void 0))}export{e as defined};

package/dist/lib/file.js

@@ -0,0 +1,2 @@
+"use client";
+function e(e,t){let n=(t??``).split(`,`).map(e=>e.trim().toLowerCase()).filter(Boolean);if(n.length===0)return!0;let r=e.name.toLowerCase(),i=e.type.toLowerCase();return n.some(e=>e.startsWith(`.`)?r.endsWith(e):e.endsWith(`/*`)?i.startsWith(e.slice(0,-1)):i===e)}const t=[`B`,`KB`,`MB`,`GB`,`TB`];function n(e){if(!Number.isFinite(e)||e<0)return``;let n=e,r=0,i=()=>r===0||n>=100?Math.round(n):Math.round(n*10)/10;for(;r<t.length-1&&i()>=1024;)n/=1024,r+=1;return`${i()} ${t[r]}`}function r(e){let t=e.lastIndexOf(`.`);if(t<=0||t===e.length-1)return``;let n=e.slice(t+1);return/^[a-z0-9]{1,5}$/i.test(n)?n.toUpperCase():``}function i(e,t){return e.name===t.name&&e.size===t.size&&e.lastModified===t.lastModified}export{r as fileExtension,n as formatFileSize,e as matchesAccept,i as sameFile};

package/dist/lib/focus-ring.js

@@ -0,0 +1,2 @@
+"use client";
+const e=`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus`,t=`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus`,n=`has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus`;export{e as focusRing,t as focusRingInset,n as focusRingWithin};

package/dist/lib/inline-style.js

@@ -0,0 +1,2 @@
+"use client";
+function e(e){e.style.length===0&&e.hasAttribute(`style`)&&e.removeAttribute(`style`)}export{e as dropEmptyStyle};

package/dist/lib/merge-refs.js

@@ -0,0 +1,2 @@
+"use client";
+function e(...e){return t=>{for(let n of e)typeof n==`function`?n(t):n&&(n.current=t)}}export{e as mergeRefs};

package/dist/lib/motion.js

@@ -0,0 +1,2 @@
+"use client";
+const e=[`data-starting-style:data-[side=bottom]:-translate-y-(--motion-shift)`,`data-starting-style:data-[side=top]:translate-y-(--motion-shift)`,`data-starting-style:data-[side=right]:-translate-x-(--motion-shift)`,`data-starting-style:data-[side=left]:translate-x-(--motion-shift)`,`data-starting-style:data-[side=inline-end]:-translate-x-(--motion-shift)`,`data-starting-style:data-[side=inline-start]:translate-x-(--motion-shift)`].join(` `),t=[`grid grid-rows-[1fr]`,`transition-[grid-template-rows] duration-(--duration-base) ease-standard`,`data-leaving:grid-rows-[0fr] data-leaving:duration-(--duration-fast)`].join(` `),n=`starting:grid-rows-[0fr]`,r=`min-h-0 min-w-0 overflow-y-clip`,i=`animate-fade-in [animation-duration:var(--duration-fast)]`,a=[`relative isolate`,`after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1`,`after:hidden data-indicator:after:block`,`after:opacity-0 data-[indicator=on]:after:opacity-100`,`after:transition-[translate,width,height,opacity] after:duration-(--duration-fast) after:ease-standard`,`data-[indicator=off]:after:transition-[opacity]`,`data-indicator-instant:after:transition-none`].join(` `),o=[`after:h-(--indicator-h) after:w-(--indicator-w)`,`after:translate-x-(--indicator-x) after:translate-y-(--indicator-y)`].join(` `),s=[`relative isolate content-start overflow-y-clip`,`transition-[min-height] duration-(--duration-fast) ease-standard`].join(` `),c=[`data-leaving:pointer-events-none data-leaving:absolute data-leaving:-z-1`,`data-leaving:opacity-0`].join(` `);export{t as collapse,n as collapseEnter,r as collapseInner,e as enterFromSide,i as fadeInFast,s as flipBox,c as flipLeaving,a as indicator,o as indicatorBox};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@endfield-ui/react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "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/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 伸到一半宽。

package/src/components/field/Field.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -11,6 +10,7 @@ import { usePresence } from "../../hooks/usePresence";
 import { StatusDanger } from "../../icons/StatusDanger";
 import { cn } from "../../lib/cn";
 import { collapse, collapseEnter, collapseInner } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type FieldContextValue = {
   /** 单个控件的 id；`group` 字段里有多个控件，不提供 */
@@ -23,11 +23,12 @@ type FieldContextValue = {
   group: boolean;
 };
 
-const FieldContext = createContext<FieldContextValue | null>(null);
+const getFieldContext =
+  /* @__PURE__ */ createLazyContext<FieldContextValue | null>(null);
 
 /** 给成组的控件（单选组）读取所在字段的状态。不在 `Field` 里时返回 `null`。 */
 export function useFieldContext(): FieldContextValue | null {
-  return useContext(FieldContext);
+  return useContext(getFieldContext());
 }
 
 type ControlProps = {
@@ -50,7 +51,7 @@ export function useFieldControl({
   invalid,
   "aria-describedby": describedBy,
 }: ControlProps) {
-  const field = useContext(FieldContext);
+  const field = useContext(getFieldContext());
   const mergedDescribedBy =
     [describedBy, field?.describedBy].filter(Boolean).join(" ") || undefined;
 
@@ -97,6 +98,7 @@ export function Field({
   children,
   ...props
 }: FieldProps) {
+  const FieldContext = getFieldContext();
   const baseId = useId();
   const id = controlId ?? `${baseId}-control`;
   const labelId = `${baseId}-label`;
@@ -212,7 +214,9 @@ export function Field({
         </legend>
         {/* 组里的控件默认竖排；要横排就自己包一层，作为这里唯一的子元素 */}
         <div className="flex flex-col items-start">
-          <FieldContext value={context}>{children}</FieldContext>
+          <FieldContext.Provider value={context}>
+            {children}
+          </FieldContext.Provider>
         </div>
         {messages}
       </fieldset>
@@ -228,7 +232,7 @@ export function Field({
       <label id={labelId} htmlFor={id} className={cn(labelClass, "mb-1.5")}>
         {labelContent}
       </label>
-      <FieldContext value={context}>{children}</FieldContext>
+      <FieldContext.Provider value={context}>{children}</FieldContext.Provider>
       {messages}
     </div>
   );

package/src/components/flyout-bar/FlyoutBar.tsx

@@ -101,7 +101,7 @@ type ItemOwnProps = {
 export type FlyoutBarItemProps = ItemOwnProps &
   Omit<ComponentProps<"div">, keyof ItemOwnProps | "id" | "style">;
 
-const itemClass = cn(
+const itemClass = /* @__PURE__ */ cn(
   "flex min-w-10 cursor-default items-center justify-center gap-2 px-2.5 text-sm select-none",
   "transition-colors duration-(--duration-fast) ease-standard",
   "data-disabled:text-ink-disabled data-highlighted:text-ink",

package/src/components/image-viewer/ImageViewer.tsx

@@ -1,7 +1,6 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useRef,
@@ -22,6 +21,7 @@ import { useSnapTrack } from "../carousel/snap-track";
 import { overlayClose, overlayHeader } from "../dialog/overlay-style";
 import { IconButton } from "../icon-button/IconButton";
 import { Viewfinder } from "../viewfinder/Viewfinder";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ImageViewerRatio = "16/9" | "4/3" | "1/1" | "3/4";
 
@@ -38,7 +38,7 @@ type ItemLike = {
   children?: ReactNode;
 };
 
-const ItemContext = createContext<{
+const getItemContext = /* @__PURE__ */ createLazyContext<{
   position: number;
   count: number;
   ratio: ImageViewerRatio;
@@ -93,6 +93,7 @@ export function ImageViewer({
   children,
   ...props
 }: ImageViewerProps) {
+  const ItemContext = getItemContext();
   // 标题、说明和大图都从子元素上读，所以子元素必须直接是 ImageViewerItem
   const items = Children.toArray(children).filter((child) =>
     isValidElement<ItemLike>(child),
@@ -133,7 +134,7 @@ export function ImageViewer({
         )}
       >
         {items.map((item, position) => (
-          <ItemContext
+          <ItemContext.Provider
             key={position}
             value={{
               position,
@@ -145,7 +146,7 @@ export function ImageViewer({
             }}
           >
             {item}
-          </ItemContext>
+          </ItemContext.Provider>
         ))}
       </ul>
       <BaseDialog.Root open={open} onOpenChange={(next) => setOpen(next)}>
@@ -427,7 +428,7 @@ export function ImageViewerItem({
   children,
   ...props
 }: ImageViewerItemProps) {
-  const item = useContext(ItemContext);
+  const item = useContext(getItemContext());
   if (!item) {
     throw new Error("ImageViewerItem 要直接放在 ImageViewer 里面");
   }

package/src/components/list/List.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type MouseEvent,
@@ -10,6 +9,7 @@ import { focusRingInset } from "../../lib/focus-ring";
 import { GhostText } from "../ghost-text/GhostText";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
 import { bandCanvas, bandGap, bandRow } from "./band-style";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ListVariant = "plain" | "band";
 
@@ -21,12 +21,14 @@ export type ListProps = ComponentProps<"ul"> & {
   variant?: ListVariant;
 };
 
-const ListVariantContext = createContext<ListVariant>("plain");
+const getListVariantContext =
+  /* @__PURE__ */ createLazyContext<ListVariant>("plain");
 
 /** 列表行的容器，外圈不描边。里面只放 `ListRow`。 */
 export function List({ variant = "plain", className, ...props }: ListProps) {
+  const ListVariantContext = getListVariantContext();
   return (
-    <ListVariantContext value={variant}>
+    <ListVariantContext.Provider value={variant}>
       <ul
         {...props}
         data-variant={variant}
@@ -38,7 +40,7 @@ export function List({ variant = "plain", className, ...props }: ListProps) {
           className,
         )}
       />
-    </ListVariantContext>
+    </ListVariantContext.Provider>
   );
 }
 
@@ -103,7 +105,7 @@ export function ListRow({
   children,
   ...props
 }: ListRowProps) {
-  const band = useContext(ListVariantContext) === "band";
+  const band = useContext(getListVariantContext()) === "band";
   const isLink = href !== undefined || render !== undefined;
   const isButton = !isLink && onClick !== undefined;
   const interactive = (isLink || isButton) && !disabled;

package/src/components/nav-action/NavAction.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   type ComponentProps,
   type MouseEvent,
@@ -9,11 +8,13 @@ import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type NavActionLayout = "inline" | "block" | "stacked";
 
 /** 侧轨和全屏菜单用它告诉里面的主行动块该怎么摆。不对外导出 */
-export const NavActionContext = createContext<NavActionLayout | null>(null);
+export const getNavActionContext =
+  /* @__PURE__ */ createLazyContext<NavActionLayout | null>(null);
 
 type OwnProps = {
   /** 换掉默认的实心三角 */
@@ -65,7 +66,7 @@ export function NavAction({
   children,
   ...props
 }: NavActionProps) {
-  const inherited = useContext(NavActionContext);
+  const inherited = useContext(getNavActionContext());
   const layout = layoutProp ?? inherited ?? "inline";
   const stacked = layout === "stacked";