@endfield-ui/react 0.1.0 → 0.3.0

package/src/components/tag-input/TagInput.tsx

@@ -287,6 +287,7 @@ export function TagInput({
     onKeyDown?.(event);
     if (event.defaultPrevented || readOnly) return;
     // 输入法正在组字时的回车是在选字，不是提交
+    // oxlint-disable-next-line typescript/no-deprecated -- Safari 上确认选字的那一下回车，isComposing 已经是 false，只有 keyCode 还是 229
     if (event.nativeEvent.isComposing || event.keyCode === 229) return;
     const input = event.currentTarget;
 

package/src/components/toast/Toast.tsx

@@ -82,7 +82,15 @@ const toneText: Record<Exclude<ToastTone, "neutral">, string> = {
 
 /*
  * 水平居中 + 跟着手指走的位移（可以往下或往右划走）。
- * 新旧两条在同一个位置交替淡入淡出，所以用绝对定位叠在一起
+ *
+ * 写在 transform 上，不能写在 translate 上：基元在拖动的时候自己往元素上写内联的
+ * transform（从元素现在的 transform 出发，加上指针走过的距离），并把过渡关掉；松手
+ * 之后交还给这里的变量。位置写在别的属性上的话两处会叠加——提示走的是手指的两倍。
+ *
+ * 进场的位移另写在 translate 上（只在起点有）：两个属性各管各的，"滑入"的过渡碰不到
+ * "跟手"的那一份。底部的从下面来；正中的是官网的做法，只有透明度。
+ *
+ * 新旧两条在同一个位置交替，所以用绝对定位叠在一起：旧的原地淡出，新的升上来
  */
 const placementClass: Record<
   ToastPlacement,
@@ -90,11 +98,11 @@ const placementClass: Record<
 > = {
   bottom: {
     viewport: "bottom-6",
-    root: "bottom-0 translate-y-[var(--toast-swipe-movement-y,0px)]",
+    root: "bottom-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),var(--toast-swipe-movement-y,0px))] data-starting-style:translate-y-(--motion-shift-lg)",
   },
   center: {
     viewport: "top-1/2",
-    root: "top-0 translate-y-[calc(-50%+var(--toast-swipe-movement-y,0px))]",
+    root: "top-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),calc(-50%+var(--toast-swipe-movement-y,0px)))]",
   },
 };
 
@@ -169,11 +177,16 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
                 // 黑底白字不随主题变：整条做成暗色的局部主题，图形和焦点环按深色底取值
                 data-theme="dark"
                 className={cn(
-                  "pointer-events-auto absolute left-1/2 w-max max-w-full translate-x-[calc(-50%+var(--toast-swipe-movement-x,0px))]",
+                  "pointer-events-auto absolute left-1/2 w-max max-w-full",
                   // 边线是给暗色页面的：那里黑底和页面几乎一样深，要靠它把提示勾出来。
                   // 亮色页面上它和提示的底几乎同色，看不出来
                   "border border-line bg-black/80 text-base leading-[1.4] text-white",
-                  "transition-opacity duration-(--duration-fast) ease-standard data-ending-style:opacity-0 data-starting-style:opacity-0",
+                  // 三样各走各的：淡入淡出 200ms；进场的位移 300ms；没划够就松手，滑回原位 200ms。
+                  // 拖动中基元把过渡整个关掉，位置贴着手指
+                  "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]",
+                  "data-ending-style:opacity-0 data-starting-style:opacity-0",
+                  // 拖的时候不选中文字：用鼠标拖会把字选上，下一次再拖，浏览器当成"拖这段字"，手势就被取消了
+                  "data-swiping:select-none",
                   // 焦点环画在里面：它是按深色底取的颜色，画到外面会压在亮色的页面上
                   focusRingInset,
                   placementClass[placement].root,

package/src/components/toc/Toc.tsx

@@ -99,6 +99,7 @@ export function Toc({
       return active;
     },
     // count 没在里面用到：它变了这个函数就换一个，滚动的监听跟着重新接、重新算一次
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [target, offset, count],
   );
   const spied = useScrollPosition<string | null>(target, read, null);

package/src/components/tooltip/Tooltip.tsx

@@ -11,6 +11,7 @@ import {
 import { createPortal } from "react-dom";
 import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
+import { enterFromSide } from "../../lib/motion";
 
 export type TooltipSide = "top" | "bottom" | "left" | "right";
 export type TooltipAlign = "start" | "center" | "end";
@@ -152,8 +153,11 @@ export function Tooltip({
             className={cn(
               // 透明的边线：高对比模式下背景色被系统覆盖，边线会自己显形
               "relative max-w-64 border border-transparent bg-surface-raised px-2.5 py-1.5 text-sm wrap-anywhere text-ink",
-              "origin-(--transform-origin) transition-opacity duration-(--duration-fast) ease-standard",
+              // 进场从触发元素那一侧挪过来 4px，退场只淡出。小件：进出都是 200ms。
+              // data-instant（键盘聚焦、移到相邻的提示）时基元要它立刻出现，整个不过渡
+              "origin-(--transform-origin) transition-[opacity,translate] duration-(--duration-fast) ease-standard",
               "data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0",
+              enterFromSide,
               className,
             )}
           >

package/src/components/viewfinder/Viewfinder.tsx

@@ -16,6 +16,12 @@ export type ViewfinderProps = ComponentProps<"div"> & {
   size?: ViewfinderSize;
   /** 正中放一个小准星，标出焦点 */
   crosshair?: boolean;
+  /**
+   * 挂上的时候取景角落位：八段短线各自从角上伸出来，播一次。
+   * 默认不动——取景角平时是静态的装饰。要它晚一点再动（等外面那一层先淡入完），
+   * 在外层设 `--bracket-delay`
+   */
+  animate?: boolean;
   /**
    * 四个角上的读数：坐标、比例、版本、时间码。
    * 必须是真实的数据；没有就不放。
@@ -44,6 +50,7 @@ const readoutPosition: Record<keyof ViewfinderReadouts, string> = {
 export function Viewfinder({
   size = "sm",
   crosshair = false,
+  animate = false,
   readouts,
   className,
   children,
@@ -58,6 +65,8 @@ export function Viewfinder({
           decor,
           "corner-brackets absolute inset-3 [--bracket-color:currentColor] [--bracket-offset:0px] [--bracket-width:1.5px]",
           armClass[size],
+          animate &&
+            "after:animate-bracket-in after:[animation-delay:var(--bracket-delay,0s)]",
         )}
       />
       {crosshair && (

package/src/index.ts

@@ -28,7 +28,9 @@ export * from "./components/flyout-bar";
 export * from "./components/ghost-text";
 export * from "./components/hatch";
 export * from "./components/hazard-stripe";
+export * from "./components/hover-card";
 export * from "./components/icon-button";
+export * from "./components/image-viewer";
 export * from "./components/input";
 export * from "./components/item-slot";
 export * from "./components/kbd";
@@ -39,6 +41,8 @@ export * from "./components/media-card";
 export * from "./components/nav-action";
 export * from "./components/nav-menu";
 export * from "./components/navigator";
+export * from "./components/otp-input";
+export * from "./components/page-header";
 export * from "./components/pagination";
 export * from "./components/panel";
 export * from "./components/play-button";
@@ -48,6 +52,7 @@ export * from "./components/radio";
 export * from "./components/rec-indicator";
 export * from "./components/registration-strip";
 export * from "./components/schedule";
+export * from "./components/scroll-area";
 export * from "./components/scroll-hint";
 export * from "./components/section-title";
 export * from "./components/segmented-control";

package/src/lib/README.md

@@ -9,6 +9,7 @@
 | `merge-refs.ts` | `mergeRefs()`：组件自己要用节点、同时还得把它交给使用方时，把几个 ref 合成一个 |
 | `defined.ts` | `defined()`：去掉值是 `undefined` 的属性。把控件的属性合并到使用方给的元素上（`render`）之前用，免得把那个元素自己写的盖掉 |
 | `decor.ts` | `decor`：装饰层共用的类 |
+| `motion.ts` | `enterFromSide`：浮层面板进场的方向位移——按基元给的 `data-side`，起点往触发元素那一侧偏 `--motion-shift`。见 [动效](../../../../docs/design/foundations/motion.md#方向位移) |
 | `date.ts` | 日期的纯函数：加减日和月、比较、把两天排成先后、夹到范围内、月历的六行七列。日期一律是 `YYYY-MM-DD` 的字符串，全部按 UTC 算，不碰本地时区。`Calendar`、`DatePicker`、`Schedule` 共用，不对外导出 |
 | `file.ts` | 文件的纯函数：按 `accept` 认类型（扩展名、MIME、`image/*` 通配）、把字节数写成 `1.2 MB`、取扩展名、判断是不是同一个文件。`FileUpload` 用，不对外导出 |
 

package/src/lib/cn.ts

@@ -24,6 +24,8 @@ const twMerge = extendTailwindMerge({
         "turn-in",
         "fade-in",
         "indeterminate",
+        "bracket-in",
+        "shift-in",
       ],
     },
   },

package/src/lib/motion.ts

@@ -0,0 +1,15 @@
+/**
+ * 浮层从触发它的那一侧来：进场的起点往触发处偏 `--motion-shift`，走完归位。
+ * 用在基元的浮层面板上——它们带着 `data-side`（面板在触发元素的哪一侧）。
+ *
+ * 位移只写在 `data-starting-style` 上：退场不走位移，只淡出。
+ * 用的地方自己给 `translate` 加过渡。`inline-start` / `inline-end` 按从左往右的排版算。
+ */
+export const enterFromSide = [
+  "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(" ");

package/src/styles/theme.css

@@ -336,6 +336,13 @@
   --duration-slow: 400ms;
   --duration-slower: 600ms;
 
+  /*
+   * 进场的方向位移：浮层从触发它的那一侧来。只是提示方向，不是滑行。
+   * 大的那一档给大面积的和贴着视口边缘出来的（全屏菜单的栏目、轻提示）
+   */
+  --motion-shift: 4px;
+  --motion-shift-lg: 8px;
+
   /* —— 母题尺寸 —— */
   --cut-sm: 6px;
   --cut-md: 10px;
@@ -368,6 +375,8 @@
   --animate-fade-in: ef-fade-in 300ms ease-out both;
   --animate-indeterminate: ef-indeterminate 1.2s linear infinite alternate;
   --animate-pulse: ef-pulse 2s ease-in-out infinite;
+  --animate-bracket-in: ef-bracket-in 200ms ease-out both;
+  --animate-shift-in: ef-shift-in 300ms ease-out both;
 
   /* 三次短促闪烁后点亮（官网实测的关键帧节奏） */
   @keyframes ef-flicker {
@@ -507,6 +516,37 @@
       opacity: 0.6;
     }
   }
+
+  /*
+   * 角括号落位：八段短线各自从角的顶点伸到满长。写成 after:animate-bracket-in，
+   * 和 corner-brackets 一起用——八层的顺序（横、竖交替）跟着 utilities.css 里那八层背景走。
+   * 只写起点：终点就是括号自己的尺寸。只动背景的尺寸，括号不会比平时多占一点地方
+   */
+  @keyframes ef-bracket-in {
+    from {
+      background-size:
+        0 var(--_w),
+        var(--_w) 0,
+        0 var(--_w),
+        var(--_w) 0,
+        0 var(--_w),
+        var(--_w) 0,
+        0 var(--_w),
+        var(--_w) 0;
+    }
+  }
+
+  /*
+   * 位移入场：从偏着的地方淡入归位。往哪边偏、偏多少由用的地方给
+   * （--shift-x / --shift-y，量用 --motion-shift 那两档），不给就只是淡入。
+   * 只写起点：终点就是元素自己的样子
+   */
+  @keyframes ef-shift-in {
+    from {
+      opacity: 0;
+      translate: var(--shift-x, 0) var(--shift-y, 0);
+    }
+  }
 }
 
 /* ------------------------------------------------------------------ */
@@ -563,6 +603,9 @@
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
+    /* 延迟也归零：不然错开的入场会变成一项一项蹦出来 */
+    animation-delay: 0s !important;
+    transition-delay: 0s !important;
     scroll-behavior: auto !important;
   }
 }

package/src/styles/utilities.css

@@ -121,7 +121,8 @@
 /* ------------------------------------------------------------------ */
 /* 角括号：四角各一个 L 形短线，用 ::after 的背景画，不占用 outline。    */
 /* 宿主要自己定位（relative 或 absolute）；括号画在宿主之外，            */
-/* 所以宿主和它的裁切祖先之间要留出 --bracket-offset 的空隙             */
+/* 所以宿主和它的裁切祖先之间要留出 --bracket-offset 的空隙。            */
+/* 要它出现时"落位"，再加 after:animate-bracket-in（关键帧在 theme.css）  */
 /* ------------------------------------------------------------------ */
 
 @utility corner-brackets {