@endfield-ui/react 1.2.0 → 1.2.1

package/src/components/tabs/Tabs.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -16,6 +15,7 @@ import { focusRing, focusRingInset } from "../../lib/focus-ring";
 import { mergeRefs } from "../../lib/merge-refs";
 import { fadeInFast, indicator, indicatorBox } from "../../lib/motion";
 import { capsuleBase, capsuleSize, capsuleState } from "../chip/capsule-style";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TabsVariant = "block" | "capsule" | "wedge";
 export type TabsSize = "sm" | "md";
@@ -30,10 +30,11 @@ type TabsContextValue = {
   switched: boolean;
 };
 
-const TabsContext = createContext<TabsContextValue | null>(null);
+const getTabsContext =
+  /* @__PURE__ */ createLazyContext<TabsContextValue | null>(null);
 
 function useTabsContext(component: string): TabsContextValue {
-  const context = useContext(TabsContext);
+  const context = useContext(getTabsContext());
   if (!context) {
     throw new Error(`<${component}> 必须放在 <Tabs> 里`);
   }
@@ -70,6 +71,7 @@ export function Tabs({
   size = "md",
   ...props
 }: TabsProps) {
+  const TabsContext = getTabsContext();
   const baseId = useId();
   const [current, select] = useControllableState({
     value,
@@ -87,9 +89,9 @@ export function Tabs({
   );
 
   return (
-    <TabsContext value={context}>
+    <TabsContext.Provider value={context}>
       <div {...props} data-variant={variant} />
-    </TabsContext>
+    </TabsContext.Provider>
   );
 }
 

package/src/components/toast/Toast.tsx

@@ -1,6 +1,5 @@
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import {
-  createContext,
   isValidElement,
   useContext,
   useMemo,
@@ -15,6 +14,7 @@ import { StatusSuccess } from "../../icons/StatusSuccess";
 import { StatusWarning } from "../../icons/StatusWarning";
 import { cn } from "../../lib/cn";
 import { focusRing, focusRingInset } from "../../lib/focus-ring";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
 export type ToastPlacement = "bottom" | "center";
@@ -51,11 +51,13 @@ type ToastData = {
 /* 带操作的提示默认停留的时间：要留出读完再去点的工夫 */
 const ACTION_DURATION = 8000;
 
-const ToastContext = createContext<ToastApi | null>(null);
+const getToastContext = /* @__PURE__ */ createLazyContext<ToastApi | null>(
+  null,
+);
 
 /** 弹出轻提示。要在 `ToastProvider` 里面用。 */
 export function useToast(): ToastApi {
-  const toast = useContext(ToastContext);
+  const toast = useContext(getToastContext());
   if (!toast) {
     throw new Error("useToast 要在 <ToastProvider> 里面用");
   }
@@ -125,6 +127,7 @@ type ToastHostProps = {
 };
 
 function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
+  const ToastContext = getToastContext();
   const { toasts, add, close } = BaseToast.useToastManager<ToastData>();
 
   const api = useMemo<ToastApi>(() => {
@@ -157,7 +160,7 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
   }, [add, close]);
 
   return (
-    <ToastContext value={api}>
+    <ToastContext.Provider value={api}>
       {children}
       <BaseToast.Portal>
         <BaseToast.Viewport
@@ -234,7 +237,7 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
           })}
         </BaseToast.Viewport>
       </BaseToast.Portal>
-    </ToastContext>
+    </ToastContext.Provider>
   );
 }
 

package/src/components/toc/Toc.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   useCallback,
   useContext,
   useEffect,
@@ -24,10 +23,11 @@ import { dropEmptyStyle } from "../../lib/inline-style";
 import { mergeRefs } from "../../lib/merge-refs";
 import { indicator } from "../../lib/motion";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TocLevel = 1 | 2 | 3;
 
-const TocContext = createContext<{
+const getTocContext = /* @__PURE__ */ createLazyContext<{
   active: string | null;
   pick: (section: string) => void;
 }>({ active: null, pick: () => {} });
@@ -110,6 +110,7 @@ export function Toc({
   children,
   ...props
 }: TocProps) {
+  const TocContext = getTocContext();
   const navRef = useRef<HTMLElement>(null);
   // 当前项的粗条画在列表上：换一项时是同一段沿引线滑过去
   const listRef = useIndicator<HTMLUListElement>("[aria-current]");
@@ -262,7 +263,7 @@ export function Toc({
           "forced-colors:after:bg-[Highlight]",
         )}
       >
-        <TocContext value={context}>{children}</TocContext>
+        <TocContext.Provider value={context}>{children}</TocContext.Provider>
       </ul>
     </nav>
   );
@@ -310,7 +311,7 @@ export function TocItem({
   children,
   ...props
 }: TocItemProps) {
-  const { active, pick } = useContext(TocContext);
+  const { active, pick } = useContext(getTocContext());
   const current = section !== undefined && section === active;
 
   return (

package/src/components/toolbar/Toolbar.tsx

@@ -2,7 +2,6 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle";
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -13,12 +12,13 @@ import {
 import { cn } from "../../lib/cn";
 import { focusRing } from "../../lib/focus-ring";
 import type { LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type ToolbarSize = "sm" | "md";
 export type ToolbarVariant = "sunken" | "outline";
 export type ToolbarOrientation = "horizontal" | "vertical";
 
-const ToolbarContext = createContext<{
+const getToolbarContext = /* @__PURE__ */ createLazyContext<{
   size: ToolbarSize;
   orientation: ToolbarOrientation;
 }>({ size: "md", orientation: "horizontal" });
@@ -76,6 +76,7 @@ export function Toolbar({
   onKeyDown,
   ...props
 }: ToolbarProps) {
+  const ToolbarContext = getToolbarContext();
   const context = useMemo(() => ({ size, orientation }), [size, orientation]);
 
   // 基元只管方向键，Home / End 在这里补上：到第一个、最后一个
@@ -97,7 +98,7 @@ export function Toolbar({
   };
 
   return (
-    <ToolbarContext value={context}>
+    <ToolbarContext.Provider value={context}>
       <BaseToolbar.Root
         {...props}
         orientation={orientation}
@@ -114,7 +115,7 @@ export function Toolbar({
           className,
         )}
       />
-    </ToolbarContext>
+    </ToolbarContext.Provider>
   );
 }
 
@@ -171,7 +172,7 @@ const itemIcon = [
 ].join(" ");
 
 function useItemClass(iconOnly: boolean, className: string | undefined) {
-  const { size } = useContext(ToolbarContext);
+  const { size } = useContext(getToolbarContext());
   return cn(
     itemBase,
     itemSize[size],
@@ -359,7 +360,7 @@ export function ToolbarToggleGroup({
   className,
   ...props
 }: ToolbarToggleGroupProps) {
-  const { orientation } = useContext(ToolbarContext);
+  const { orientation } = useContext(getToolbarContext());
 
   return (
     <BaseToggleGroup

package/src/components/tooltip/Tooltip.tsx

@@ -1,7 +1,6 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import {
   cloneElement,
-  createContext,
   useContext,
   useId,
   useSyncExternalStore,
@@ -12,6 +11,7 @@ import { createPortal } from "react-dom";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import { enterFromSide } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TooltipSide = "top" | "bottom" | "left" | "right";
 export type TooltipAlign = "start" | "center" | "end";
@@ -19,7 +19,7 @@ export type TooltipAlign = "start" | "center" | "end";
 /* 规范：出现前约 300ms，消失不延迟 */
 const DEFAULT_DELAY = 300;
 
-const InProviderContext = createContext(false);
+const getInProviderContext = /* @__PURE__ */ createLazyContext(false);
 
 export type TooltipProviderProps = {
   /** 这一组提示统一的延迟，毫秒 */
@@ -37,9 +37,12 @@ export function TooltipProvider({
   timeout,
   children,
 }: TooltipProviderProps) {
+  const InProviderContext = getInProviderContext();
   return (
     <BaseTooltip.Provider delay={delay} timeout={timeout}>
-      <InProviderContext value={true}>{children}</InProviderContext>
+      <InProviderContext.Provider value={true}>
+        {children}
+      </InProviderContext.Provider>
     </BaseTooltip.Provider>
   );
 }
@@ -107,7 +110,7 @@ export function Tooltip({
   className,
 }: TooltipProps) {
   const descriptionId = useId();
-  const inProvider = useContext(InProviderContext);
+  const inProvider = useContext(getInProviderContext());
   // 提示是一块和页面相反的颜色。做成相反主题的局部主题，而不是直接用反转色：
   // 里面的键位提示、着色词因此也按这块底色取值，不会和底融在一起
   const { anchorRef, portalRef } = usePortalScope({ invertTheme: true });

package/src/components/top-bar/TopBar.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, ReactNode } from "react";
 import { cn } from "../../lib/cn";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
 
 export type TopBarProps = ComponentProps<"header"> & {
   /** 最左边的标志。本库不带标志，传你自己的 */
@@ -28,6 +28,7 @@ export function TopBar({
   children,
   ...props
 }: TopBarProps) {
+  const NavActionContext = getNavActionContext();
   return (
     <header
       {...props}
@@ -40,7 +41,11 @@ export function TopBar({
       {brand && <div className="flex min-w-0 items-center">{brand}</div>}
       <div className="min-w-0 flex-1">{children}</div>
       {tools && <div className="flex shrink-0 items-center gap-1">{tools}</div>}
-      {action && <NavActionContext value="inline">{action}</NavActionContext>}
+      {action && (
+        <NavActionContext.Provider value="inline">
+          {action}
+        </NavActionContext.Provider>
+      )}
       {menu}
     </header>
   );

package/src/icons/ArrowCorner.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 斜箭头 ↘：分节引导、"查看详情" */
-export const ArrowCorner = createIcon(
+export const ArrowCorner = /* @__PURE__ */ createIcon(
   "ArrowCorner",
   <path d="M5 5l14 14M19 7v12H7" />,
 );

package/src/icons/ArrowLeft.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ArrowLeft = createIcon(
+export const ArrowLeft = /* @__PURE__ */ createIcon(
   "ArrowLeft",
   <path d="M20 12H5M11 5l-7 7 7 7" />,
 );

package/src/icons/ArrowRight.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ArrowRight = createIcon(
+export const ArrowRight = /* @__PURE__ */ createIcon(
   "ArrowRight",
   <path d="M4 12h15M13 5l7 7-7 7" />,
 );

package/src/icons/CalendarIcon.tsx

@@ -4,7 +4,7 @@ import { createIcon } from "./createIcon";
  * 日历：日期字段右侧的记号。
  * 名字带 `Icon` 是因为 `Calendar` 已经是月历控件了
  */
-export const CalendarIcon = createIcon(
+export const CalendarIcon = /* @__PURE__ */ createIcon(
   "CalendarIcon",
   <path d="M4 6h16v14H4zM4 11h16M8 3v5M16 3v5" />,
 );

package/src/icons/Check.tsx

@@ -1,4 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 对勾：已选、已完成 */
-export const Check = createIcon("Check", <path d="M4 12l6 6L20 6" />);
+export const Check = /* @__PURE__ */ createIcon(
+  "Check",
+  <path d="M4 12l6 6L20 6" />,
+);

package/src/icons/ChevronDown.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronDown = createIcon("ChevronDown", <path d="M4 9l8 8 8-8" />);
+export const ChevronDown = /* @__PURE__ */ createIcon(
+  "ChevronDown",
+  <path d="M4 9l8 8 8-8" />,
+);

package/src/icons/ChevronLeft.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronLeft = createIcon(
+export const ChevronLeft = /* @__PURE__ */ createIcon(
   "ChevronLeft",
   <path d="M15 4l-8 8 8 8" />,
 );

package/src/icons/ChevronRight.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const ChevronRight = createIcon(
+export const ChevronRight = /* @__PURE__ */ createIcon(
   "ChevronRight",
   <path d="M9 4l8 8-8 8" />,
 );

package/src/icons/Close.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Close = createIcon("Close", <path d="M5 5l14 14M19 5L5 19" />);
+export const Close = /* @__PURE__ */ createIcon(
+  "Close",
+  <path d="M5 5l14 14M19 5L5 19" />,
+);

package/src/icons/Crosshair.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 四个取景角加中心的准星：图鉴里"未获得"的占位符 */
-export const Crosshair = createIcon(
+export const Crosshair = /* @__PURE__ */ createIcon(
   "Crosshair",
   <path d="M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5M12 9v6M9 12h6" />,
 );

package/src/icons/Lock.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Lock = createIcon(
+export const Lock = /* @__PURE__ */ createIcon(
   "Lock",
   <path d="M5 11h14v10H5zM8 11V7a4 4 0 0 1 8 0v4" />,
 );

package/src/icons/Menu.tsx

@@ -1,4 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 三条横线：打开菜单 */
-export const Menu = createIcon("Menu", <path d="M3 6h18M3 12h18M3 18h18" />);
+export const Menu = /* @__PURE__ */ createIcon(
+  "Menu",
+  <path d="M3 6h18M3 12h18M3 18h18" />,
+);

package/src/icons/Minus.tsx

@@ -1,4 +1,4 @@
 import { createIcon } from "./createIcon";
 
 /** 短横：半选、减少 */
-export const Minus = createIcon("Minus", <path d="M4 12h16" />);
+export const Minus = /* @__PURE__ */ createIcon("Minus", <path d="M4 12h16" />);

package/src/icons/Plus.tsx

@@ -1,3 +1,6 @@
 import { createIcon } from "./createIcon";
 
-export const Plus = createIcon("Plus", <path d="M12 4v16M4 12h16" />);
+export const Plus = /* @__PURE__ */ createIcon(
+  "Plus",
+  <path d="M12 4v16M4 12h16" />,
+);

package/src/icons/StatusDanger.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 菱形：危险、错误 */
-export const StatusDanger = createIcon(
+export const StatusDanger = /* @__PURE__ */ createIcon(
   "StatusDanger",
   <path d="M12 2.5l9.5 9.5-9.5 9.5L2.5 12zM12 7v6M12 15v2" />,
 );

package/src/icons/StatusInfo.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 方框：说明。四种状态图标各用一种外形，不只靠颜色区分 */
-export const StatusInfo = createIcon(
+export const StatusInfo = /* @__PURE__ */ createIcon(
   "StatusInfo",
   <path d="M4 4h16v16H4zM12 11v6M12 7v2" />,
 );

package/src/icons/StatusSuccess.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 圆 + 对勾：成功 */
-export const StatusSuccess = createIcon(
+export const StatusSuccess = /* @__PURE__ */ createIcon(
   "StatusSuccess",
   <>
     <circle cx="12" cy="12" r="9" />

package/src/icons/StatusWarning.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 三角：警告 */
-export const StatusWarning = createIcon(
+export const StatusWarning = /* @__PURE__ */ createIcon(
   "StatusWarning",
   <path d="M12 4l9 16H3zM12 10v5M12 16.5v2" />,
 );

package/src/icons/TriangleRight.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 实心三角 ▶：前往、展开 */
-export const TriangleRight = createIcon(
+export const TriangleRight = /* @__PURE__ */ createIcon(
   "TriangleRight",
   <path d="M7 4l12 8-12 8z" fill="currentColor" stroke="none" />,
 );

package/src/icons/Upload.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from "./createIcon";
 
 /** 上传：一个托盘，上面一支朝上的箭头 */
-export const Upload = createIcon(
+export const Upload = /* @__PURE__ */ createIcon(
   "Upload",
   <path d="M12 16V4M7 9l5-5 5 5M4 15v5h16v-5" />,
 );

package/src/lib/cn.ts

@@ -5,7 +5,7 @@ import { extendTailwindMerge } from "tailwind-merge";
  * theme.css 里的自定义令牌名需要登记，否则 tailwind-merge 会把 `text-micro`
  * 当成颜色，与 `text-ink` 互相覆盖。改动 theme.css 的令牌名时同步改这里。
  */
-const twMerge = extendTailwindMerge({
+const twMerge = /* @__PURE__ */ extendTailwindMerge({
   extend: {
     theme: {
       text: ["micro", "ghost"],

package/src/lib/create-lazy-context.ts

@@ -0,0 +1,6 @@
+import { createContext, type Context } from "react";
+
+export function createLazyContext<T>(defaultValue: T) {
+  let context: Context<T> | undefined;
+  return () => (context ??= createContext(defaultValue));
+}